Canvas学习第一课

Canvas

1. HTML

<canvas id="canvas"></canvas>

1. javascript

var canvas=document.getElementById("canvas")
var context=canvas.getContext("2d")
//使用context进行绘制

1. canvas属性和方法

• canvas.width
• canvas.height
• canvas.getContext("2d")

绘制(基于状态)

1. 线条

• moveTo(x,y)
• lineTo(x,y)
• beginPath()   //重新开始一段路径的绘制
• closePath()   //封闭路径

1. 状态设置

• lineWidth   线条宽度
• strokeStyle  线条样式
• fillStyle       封闭图形样式

1. 绘制方法

• stroke()   //绘制边框
• fill()       填充

1. 矩形

• rect(x,y,width,height)
• fillRect(x,y,width,height)
• strokeRect(x,y,width,height)