Canvas的概念最初由苹果公司提出,用于在Mac OS X WebKit中创建控件。在Canvas之前,程序员通常用Adobe的Flash或SVG绘图。
创建canvas元素
<canvas></canvas>
为避免浏览器不支持canvas而出现显示异常,可以在canvas中添加替代文本:
<canvas> not support canvas </canvas>
默认canvas会创建一个width为300,height为150的矩形区域。在页面中添加canvas元素后,可以通过JavaScript控制绘图。使用canvas首先需要获取上下文(context),并在上下文中执行绘图动作。canvas的坐标系以左上为原点,记为(0,0),x轴沿水平向右延伸,y轴沿垂直向下延伸。常见JavaScript代码框架:
var canvas = document.getElementById("canvasid"); var context = canvas.getContext("2d"); context.xxx();
常见的上下文方法:
方法 | 说明 |
---|---|
context.beginPath() | 绘制路径。 |
context.moveTo(x,y) | 移动到制定坐标。 |
context.lineTo(x,y) | 绘制到目标坐标的一条直线。 |
context.arc(x,y,r,st_angle,ed_angle, counterclockwise) | 绘制圆。 |
context.closePath() | 绘制闭合的图形。 |
context.stoke() | 真实的绘制图片。 |
画一条对角线
画一个简单的正方形
画一个简单的棋盘
棋盘上标数字