当前位置:Gxlcms > html代码 > 炫丽的倒计时效果Canvas绘图与动画视频的资源推荐

炫丽的倒计时效果Canvas绘图与动画视频的资源推荐

时间:2021-07-01 10:21:17 帮助过:41人阅读

Canvas顾名思义是定义在浏览器上画布,但Canvas不仅仅是一个元素,它更是一套编程的接口,它的出现已然超过了Web基于文档的设计初衷。利用它你可以开发出很多梦寐以求的内容,让编程工作者彻底释放自己的创造力!

ZE05G1{28JM3WAEYXN935IU.png

课程播放地址: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网其它相关文章!

人气教程排行