canvas常用命令

canvas常用命令

1.首先使用canvas标签。

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>

2.使用 JavaScript 来绘制图像

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

1.首先，找到 canvas 元素:

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

2.然后，创建 context 对象：

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

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

ctx.fillStyle="#FF0000"; 

ctx.fillRect(0,0,150,75); 

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

fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。

3.canvas路径

在Canvas上画线，我们将使用以下两种方法：

• moveTo(x,y) 定义线条开始坐标

• lineTo(x,y) 定义线条结束坐标

  再 ctx.stroke(); 线条就出来了。

4.canvas 画圆

在canvas中绘制圆形, 我们将使用以下方法: