canvas教程

JavaScript学习小结之使用canvas画“哆啦A梦”时钟(2)

字号+ 作者:H5之家 来源:H5之家 2017-06-04 17:03 我要评论( )

function drawTime(context,theArc,theLength,color="#000"){//保存当前的画布环境,和restore方法配合使用能够恢复画布上下文context.save();//旋转画布,rotate传入的参数代表旋转的弧度context.rotate(theArc);/

function drawTime(context,theArc,theLength,color="#000"){ //保存当前的画布环境,和restore方法配合使用能够恢复画布上下文 context.save(); //旋转画布,rotate传入的参数代表旋转的弧度 context.rotate(theArc); //开始一条新的子路径,我们开始画指针啦 context.beginPath(); //将开始点移动到(0,0) context.moveTo(0,0); //画一条到(theLength,0)的路径 context.lineTo(theLength,0); //用指定的color颜色画这条路径 context.strokeStyle = color; //路径的宽度为2 context.lineWidth = 2; //路径是不可见的,如果要看到路径,需要用stroke来描线,而如何描这条线,可以由我们以上用到的几个属性来定义 context.stroke(); //恢复上下文 context.restore(); }

虽然接近尾声啦,但是还有一个很重要的clearTime函数,要是没有它,你的时钟会被密密麻麻的秒针占领的,关爱密集恐惧症患者,我们人人有责

function clearTime(context){ //我们开始一条新的子路径,然后描绘一个充斥着好看蓝色的圆,把我们之前画的指针都遮盖住,相当于清除了一次表盘 context.beginPath(); context.arc(0,0,80,0,2*Math.PI,false); context.fillStyle = "#4ba2cf"; context.fill(); //很不幸,我们的蓝胖子也被误伤了,所以再召唤它一次吧,决定就是你啦,皮卡丘(?咦) var image = new Image(); image.src = "2.png"; //这个坐标和第一次加载的坐标不同,因为我们修改了变换矩阵,还记得吗?所以,它们的坐标应该是互补的 context.drawImage(image,-75,-75,150,150); }

嗯啦,ok,现在是真的到此为止啦,差不多该去吃饭咯~各位可爱的程序猿们要记得吃饭哦~



相关阅读 :
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
javascript学习小结之prototype
JavaScript学习小结(7)之JS RegExp
javascript学习总结之js使用技巧
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
javascript学习指南之回调问题
JavaScript学习笔记之创建对象
JavaScript学习笔记之ES6数组方法
JavaScript学习笔记之取数组中最大值和最小值
JavaScript学习笔记之数组去重
JavaScript学习笔记之数组随机排序

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评
i