Canvas（一）：画矩形

来源：互联网发布：域名未授权怎么解决编辑：程序博客网时间：2024/05/17 04:09

什么是 Canvas?

HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。

浏览器支持

表格中的数字表示支持 <canvas> 元素的第一个浏览器版本号。

创建一个画布（Canvas）

向 Html5 页面添加 canvas 元素。

注意: 默认情况下 <canvas> 元素没有边框和内容。

<canvas>简单实例如下:

<canvas id="myCanvas" width="200" height="100"></canvas>

注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.

提示:你可以在HTML页面中使用多个 <canvas> 元素.

使用 JavaScript 来绘制图像

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

<script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75);</script>

实例解析:

JavaScript 使用 id 来寻找 canvas 元素：

var c=document.getElementById("myCanvas");

然后，创建 context 对象：

var ctx=c.getContext("2d");

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

下面的两行代码绘制一个红色的矩形：

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。

fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。

上面的 fillRect 方法拥有参数 (0,0,150,75)。意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。

fillRect(x, y, width, height)：绘制一个填充的矩形
strokeRect(x, y, width, height)：绘制一个矩形的边框
clearRect(x, y, width, height)：清除指定矩形区域，让清除部分完全透明

除此之外还可以通过Canvas中CanvasRenderingContext2D.rect()路径方法创建矩形。这个方法需要配合CanvasRenderingContext2D.fill()绘制一个填充的矩形，CanvasRenderingContext2D.stroke()绘制一个填充的矩形。另外，还可以直接使用Canvas的绘制路径的方法来绘制矩形。

路径绘制矩形

方法：moveTo()和lineTo()可以绘制线段，如此一来，四条线就能拼出一个矩形，然后通过fill()和stroke()绘制出填充和边框矩形。

Canvas - 路径
在Canvas上画线，我们将使用以下两种方法：
moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
使用 stroke() 方法来绘制线条:
！beginPath() 方法在一个画布中开始子路径的一个新的集合。
beginPath() 方法开始一条路径，或重置当前的路径。
提示：请使用这些方法来创建路径 moveTo()、lineTo()、quadricCurveTo()【quadricCurveTo()通过使用表示二次贝塞尔曲线的指定控制点，向当前路径添加一个点】quadricCurveTo()方法，w3c用法链接、bezierCurveTo()【bezierCurveTo()通过使用表示三次贝塞尔曲线的指定控制点，向当前路径添加一个点】bezierCurveTo()方法，w3c用法链接、arcTo()【arcTo()在画布上创建介于两个切线之间的弧/曲线】arcTo()方法，w3c用法链接和 arc()【 arc()创建弧/曲线（用于创建圆或部分圆）】arc()方法，w3c用法链接

提示：请使用 stroke() 【 stroke() 会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色】方法在画布上绘制确切的路径。

<!DOCTYPE HTML>  <html>  <body>  <div class="" style="margin:50px">    <canvas id="myCanvas" width="500" height="300" style="border:1px solid red;">    您的浏览器不支持 HTML5 canvas 标签。    </canvas>  </div>  <script type="text/javascript">      var c=document.getElementById("myCanvas");      var ctx=c.getContext("2d");      ctx.strokeStyle = 'green';//边框色      ctx.fillStyle = 'red'//填充色      ctx.lineWidth = 2;//边框宽度        // 边框矩形。      ctx.beginPath();      ctx.moveTo(20, 20);      ctx.lineTo(100, 20);      ctx.lineTo(100, 80);      ctx.lineTo(20, 80);      ctx.lineTo(20, 20);      ctx.stroke();        // 填充矩形      ctx.beginPath();      ctx.moveTo(200, 20);      ctx.lineTo(280, 20);      ctx.lineTo(280, 80);      ctx.lineTo(200, 80);      ctx.lineTo(200, 20);      ctx.fill();  </script>    </body>  </html>

在Canvas中我们有一个closePath()的方法，在绘制矩形的时候，借助这个方法，我们通过绘制三条线段，就能和起始点闭合，也就绘制出相应的矩形。基于上面的示例，在stroke()和fill()前面添加closePath()即可

rect()绘制矩形

方法：rect(x, y, width, height)，x和y是矩形左上角的坐标点，width是矩形的宽，height是矩形的高。

<!DOCTYPE HTML>  <html>  <body>  <div class="" style="margin:50px">    <canvas id="myCanvas" width="500" height="300" style="border:1px solid red;">    您的浏览器不支持 HTML5 canvas 标签。    </canvas>  </div>  <script type="text/javascript">      var c=document.getElementById("myCanvas");      var ctx=c.getContext("2d");      ctx.strokeStyle = 'green';//边框色      ctx.fillStyle = 'red'//填充色      ctx.lineWidth = 2;//边框宽度        //边框矩形。      ctx.beginPath();      ctx.rect(20,20,80,60);      ctx.stroke();        //填充矩形      ctx.beginPath();      ctx.rect(200,20,80,60);      ctx.fill();  </script>    </body>  </html>