HTML5先行者高级交流群
欢迎加入学习讨论
专注前端,专注网页设计制作及网站开发项目 - (低价承接网站开发项目) QQ:370158739
加入收藏
RSS
首页
JS下载
CSS3手册
Json在线解析
html5教程
网站及特效实例
视频教程
html5资讯
网络编程
html5书籍
HTML5演示
论坛
入门教程
高级应用
滚动新闻
html5实验
javascript特效
Photoshop教程及网页素材
jquery特效
html5视频教程
CSS3视频教程
JS视频教程
JUQERY视频教程
Bootstrap视频教程
html5video
微信服务号开发教程
最新资讯
最新动态
IT动态
ASP编程
PHP编程
正则表达式
AJAX相关
ASP.NET
JSP编程
Flex
脚本加解密
网页编辑器
相关技巧
黑客相关
网页播放器
其它综合
java教程
您的位置
:
首页
>
html5教程
>
高级应用
» 正文
html5使用canvas画一条线_html5教程技巧
2014-12-28 00:35:55
[
小
大
]
已经帮助:
人解决问题
本文是html5的一个简单应用,使用canvas画一条线,其实是自己学习canvas之后的一个练习题,这里分享给大家,超级简单。
代码太简单了,就不废话了
5ZNHTML5中文学习网 - HTML5先行者学习网
复制代码
代码如下:
5ZNHTML5中文学习网 - HTML5先行者学习网
var canvas=document.getElementById("canvas");
5ZNHTML5中文学习网 - HTML5先行者学习网
//设置绘图环境
5ZNHTML5中文学习网 - HTML5先行者学习网
var cxt=canvas.getContext('2d');
5ZNHTML5中文学习网 - HTML5先行者学习网
//开启新路近
5ZNHTML5中文学习网 - HTML5先行者学习网
cxt.beginPath();
5ZNHTML5中文学习网 - HTML5先行者学习网
// 设置笔触的宽度
5ZNHTML5中文学习网 - HTML5先行者学习网
cxt.lineWidth=10;
5ZNHTML5中文学习网 - HTML5先行者学习网
//设置笔触的颜色
5ZNHTML5中文学习网 - HTML5先行者学习网
cxt.strokeStyle="#00ff00";
5ZNHTML5中文学习网 - HTML5先行者学习网
//设定笔触的位置
5ZNHTML5中文学习网 - HTML5先行者学习网
cxt.moveTo(20,20);
5ZNHTML5中文学习网 - HTML5先行者学习网
//设置移动的位置
5ZNHTML5中文学习网 - HTML5先行者学习网
cxt.lineTo(100,20);
5ZNHTML5中文学习网 - HTML5先行者学习网
//画线
5ZNHTML5中文学习网 - HTML5先行者学习网
cxt.stroke();//这个时候的线已经出来了
5ZNHTML5中文学习网 - HTML5先行者学习网
//关闭路径
5ZNHTML5中文学习网 - HTML5先行者学习网
cxt.closePath();
5ZNHTML5中文学习网 - HTML5先行者学习网
//凡事路径图形必须先开始路径,画完之后必须结束路径
5ZNHTML5中文学习网 - HTML5先行者学习网
5ZNHTML5中文学习网 - HTML5先行者学习网
5ZNHTML5中文学习网 - HTML5先行者学习网
来顶一下
返回首页
(责任编辑:)
推荐书籍
推荐资讯
html5及css3做的3D小
html5视频应用
友情链接:
联系人:QQ370158739
关于HTML5先行者
-
联系我们
-
广告服务
-
友情链接
-
网站地图
-
版权声明
-
人才招聘
-
帮助