06 2016 档案

canvas drawImage方法不显示图片的解决方案
摘要：先复习一下用法： 各个参数说明： 用一张图来说明： context.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh) 以下是w3school给的例子： 然而实际在运行中图片是不显示的，这是比较坑的问题，解决方法是将drawImage放入 img.onloa 阅读全文
posted @ 2016-06-22 17:52 逐影 阅读(9123) 评论(0) 推荐(0) 编辑
canvas转盘抽奖的实现(二)
摘要：本篇是《canvas转盘抽奖的实现(一)》的另一种实现方法，主要通过css3的transform以及transition过渡来实现。 // <![CDATA[ (function() { var canvas = document.createElement('canvas'), a = docum 阅读全文
posted @ 2016-06-16 18:39 逐影 阅读(320) 评论(0) 推荐(0) 编辑
canvas转盘抽奖的实现(一)
摘要：网络上已经有了很多转盘抽奖的代码，但大多是用jQuery插件实现的，其中的原理比较难弄明白，于是自己摸索了一个。最终效果如下： 实现步骤： 1.根据奖品数量绘制转盘 这一部分代码的效果如下： 图一 要注意首个奖品说明的位置，也就是一等奖的位置，是从三点钟方向开始的，这是arc()方法的规定，下面这张 阅读全文
posted @ 2016-06-12 22:25 逐影 阅读(1093) 评论(0) 推荐(1) 编辑
对canvas arc()中counterclockwise参数的一些误解
摘要：一直没有很细心地去研究CanvasRenderingContext2D对象的arc方法，对它的认识比较模糊，导致犯了一些错误，特发此文，以纠正之前的错误理解。 arc()方法定义如下： arc() 方法使用一个中心点和半径，为一个画布的当前子路径添加一条弧。 语法： 沿着圆指定弧的开始点和结束点的一 阅读全文
posted @ 2016-06-05 20:28 逐影 阅读(1539) 评论(0) 推荐(1) 编辑
横向卷轴(side-scrolling)地图的canvas实现
摘要：标题有点小题大作了，实际上是实现一张看起来连续的运动背景图片。 效果如下： 实现原理： 图片1与图片2是两张首尾衔接的图片，图片1以一定速度移出canvas，图片2慢慢移进canvas，当图片1完全移出canvas范围后，立即将图片1位置重置，由于两张图片是首尾衔接的，所以看起来就像是一张无限滚动的 阅读全文
posted @ 2016-06-01 21:07 逐影 阅读(1647) 评论(0) 推荐(1) 编辑

点击右上角即可分享
微信分享提示