HTML5标签之canvas实战

当前位置 : 首页 > 网页制作 > html5 > HTML5标签之canvas实战

HTML5标签之canvas实战

来源: 作者: 时间:2016-01-30 08:53
1:什么是 Canvas?HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域,您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。2
1:什么是 Canvas?
HTML5 的 canvas 元素使用 Script 在网页上绘制图像。
画布是一个矩形区域,您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。


2:创建 Canvas 元素
向 HTML5 页面添加 canvas 元素。
规定元素的 id、宽度和高度:



3:通过 来绘制
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();
防止多个图形之间产生关联。
Tag:
上一篇:HTML5智能表单
下一篇:HTML5新特性汇总
网友评论

<