时间:2021-07-01 10:21:17 帮助过:41人阅读
课程播放地址:http://www.gxlcms.com/course/303.html
该老师讲课风格:
教师讲课深入浅出,条理清楚,层层剖析,环环相扣,论证严密,结构严谨,用思维的逻辑力量吸引学生的注意力,用理智控制课堂教学进程。学生通过听教师的讲授,不仅学到知识,也受到思维的训练,还受到教师严谨的治学态度的熏陶和感染
本视频中较为难点是倒计时效果Canvas绘图与动画了:
HTML:
<canvas id="canvas" style="border:1px solid red;"></canvas>
JS :
var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d');
// 注意,是不加单位的,而且不建议在css中设置宽高。最好是调用width和height这两个属性 canvas.width = 1024; canvas.height = 768;
实践:绘制直线(要非常注意,状态一定要先设置才能调stroke()方法进行绘制,如果顺序颠倒,将不会出结果,而且不报错,debugger也调不出问题来。)
// 先设置状态 context.moveTo(100, 100); context.lineTo(700, 700); context.lineTo(700, 100); context.lineTo(100, 100); context.lineWidth = 10; context.strokeStyle = "pink"; // 再进项绘制 context.stroke();
定义一个路径:
context.moveTo(100, 100); //接受两个参数,表示x坐标和y坐标 context.lineTo(700, 700);
定义多个路径:用如下方法将要定义的状态包裹住,再调用stroke()方法,既可绘制不同状态的线条
context.beginPath(); context.closePath();
七巧板的绘制 :图1为老师绘制,图2我绘制。。哈哈哈哈,可真粗糙。下节课学习绘制圆和弧线,把canvas系统学习下来后就去尝试使用js的碰撞技术做一下七巧板的移动拼接成不同的图形
以上就是炫丽的倒计时效果Canvas绘图与动画视频的资源推荐的详细内容,更多请关注Gxl网其它相关文章!