[HTML5 Canvas学习]绘制矩形

　　1.使用strokeRect和fillRect方法绘制矩形

　　　　a.strokeRect是绘制一个不填充的矩形

　　　　b.fillRect是绘制一个填充的矩形

　　代码：

        <script>var canvas = document.getElementById('canvas'),context = canvas.getContext('2d');context.lineJoin = 'round';context.lineWidth = 20;context.strokeRect(10, 10, 150, 100);context.fillRect(180, 10, 150, 100);</script>

　　效果如图：

　　2.通过lineTo绘制矩形

<script>var canvas = document.getElementById('canvas'),context = canvas.getContext('2d');context.lineJoin = 'round';context.lineWidth = 20;context.beginPath();context.moveTo(10, 10);context.lineTo(160, 10);context.lineTo(160, 110);context.lineTo(10, 110);context.closePath();context.stroke();context.beginPath();context.moveTo(180, 10);context.lineTo(330, 10);context.lineTo(330, 110);context.lineTo(180, 110);context.closePath();context.fill();</script>

　　效果图如下：

转载于:https://www.cnblogs.com/jerry19890622/p/3702754.html

[HTML5 Canvas学习]绘制矩形相关推荐

html5绘制矩形动画,HTML5 Canvas中绘制矩形实例
本文翻译自Steve Fulton & Jeff Fulton HTML5 Canvas, Chapter 2, "The Basic Rectangle Shape". ...
HTML5 Canvas中绘制矩形
绘制矩形上一节,我们使用lineTo()方法绘制一个封闭的矩形.其实,canvas的API提供了rect()方法可以绘制矩形.rect()方法是路径方法,它会把指定的矩形添加到当前路径的子路径中.它 ...
矩形做成翻页的效果html5,HTML5 在canvas中绘制矩形附效果图
一.绘制矩形 canvas使用原点(0,0)在左上角的坐标系统,x坐标向右递增,y坐标向下递增. 使用绘图环境的矩形绘制函数来绘制矩形. fillRect(x,y,width,height) : 绘制 ...
html5canvas绘制图片源码,HTML5 CANVAS：绘制图片
HTML5 CANVAS:绘制图片通过前面的学习,我们现在已经可以在HTML5 canvas中绘制图形和文字,并给它们设置一些样式.我们还可以在中绘制图片.用于在作为绘制源的图片可以是下面的几种元素 ...
前端html生成图片,HTML5 Canvas：绘制图片
通过前面的学习,我们现在已经可以在HTML5 canvas中绘制图形和文字,并给它们设置一些样式.我们还可以在中绘制图片.用于在作为绘制源的图片可以是下面的几种元素类型: HTMLImageEleme ...
HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)
HTML5 Canvas自定义圆角矩形与虚线(RoundedRectangle and Dash Line) 实现向HTML Canvas 2d context绘制对象中添加自定义的函数功能演示,如何 ...
html坐标绘制路径,HTML5 CANVAS：绘制路径
一条HTML5 canvas路径是通过绘制指令来连接一系列的点,由这一系列的点构成直线或曲线.路径可以用于在HTML5 canvas上绘制各种类型的图形:直线.圆形.多边形等等.路径的绘制是canva ...
html绘制动态小人,JavaScript和html5 canvas如何绘制一个小人的代码
这篇文章主要介绍了JavaScript+html5 canvas绘制的小人效果,涉及JavaScript结合html5 canvas图形绘制及颜色随机填充的技巧,需要的朋友可以参考下本文实例讲述了J ...
HTML1个像素宽的代码,HTML5 Canvas中绘制一个像素宽的细线实现代码详情
正统的HTML5 Canvas中如下代码ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(300,100); ct ...

[HTML5 Canvas学习]绘制矩形

[HTML5 Canvas学习]绘制矩形相关推荐

最新文章

热门文章