HTML5 canvas

<canvas id="canvas" width="200"  height="200">您的浏览器不支持canvas</canvas>     //这里的width和height指的是画布的大小

 

var canvas = document.getElementById('canvas)          //获取DOM

var ctx = canvas.getContext('2d')         // 转换成2d

ctx.beginPath()   // 开始/重置一条路径的绘制    

ctx.fill()   // 填充

ctx.fillRect()  // (位置、大小（长宽）)

ctx.fillStyle=’‘   //填充颜色

ctx.storke()  // 绘制

ctx.arc(95，50，40，0，2*Math.PI)  // 绘弧形相关的

ctx.moveTo()      //定义线条的开始坐标

ctx.lineTo()        //定义线条的结束坐标

 

面试题：

1.绘制一个背景颜色为红色的矩形：

var canvas = document.getElementById('canvas')

var ctx = canvas.getContext('2d')

ctx.fillStyle="red"

ctx.fillRect(20,20,40,60)

2.绘制一条线： 

var canvas = document.getElementById('canvas')

var ctx = canvas.getContext('2d')

ctx.moveTo(0,0)

ctx.lineTo(0,200)

ctx.skorke()

3.绘制一个红色的圆：

var c=document.getElementById("canvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();