HTML5标签之canvas实战

浏览数：34 / 时间：2015年06月09日

1:什么是 Canvas？
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

2:创建 Canvas 元素
向 HTML5 页面添加 canvas 元素。
规定元素的 id、宽度和高度：
<canvas id="myCanvas" width="200" height="100"></canvas>

3:通过 JavaScript 来绘制
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
//画一个线段
//获取画布canvas DOM
var c = document.getElementById("myCanvas");
console.log(c);
//设置绘图环境CanvasRenderingContext2D
var cxt = c.getContext("2d");
console.log(cxt);
//设置画笔宽度
cxt.lineWidth = 10;
//设置画笔颜色
cxt.strokeStyle = "#ff9900";
//设置笔触的位置
cxt.moveTo(20, 20);
//设置移动的方式
cxt.lineTo(100, 20);
//画线
cxt.stroke();

注意：凡是路径图形，必须先开始路径，画完结束路径（封闭路径）
cxt.beginPath();
cxt.closePath();
防止多个图形之间产生关联。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

HTML5标签之canvas实战