首页 » HTML » HTML5 Canvas

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()真实的绘制图片。

画一条对角线

画一个简单的正方形

画一个简单的棋盘

棋盘上标数字

分享

0