欢迎来到做网站吧,请先 登录注册

教程观看记录

资源投稿 | 网站地图 | 联系我们 | 收藏本站 |

做网站吧 > HTML5 > HTML5+CSS3 >
收 藏
2600

HTML5标签之canvas实战

所属栏目:HTML5+CSS3 来源:未知 内容发布:做网站吧



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


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



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();

文章关键词:

相关推荐
网友评论
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
上一篇:CSS3制作绚丽圆形动态按钮
下一篇:纯CSS3绘制3D按钮实例教程

返回顶部