使用JavaScript来绘制图像

 

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

 

    实例

 

    varc=document.getElementById("myCanvas");

 

    varctx=c.getContext("2d");

 

    ctx.fillStyle="#FF0000";

 

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

 

    实例解析:

 

    首先，找到<canvas>元素:

 

    varc=document.getElementById("myCanvas");

 

    然后，创建context对象：

 

    varctx=c.getContext("2d");

 

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

 

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

 

    ctx.fillStyle="#FF0000";

 

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

 

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

 

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