canvas-炫丽的倒计时效果Canvas绘图与动画基础

时间：2022-01-16 11:02:31

canvas 是基于转台来绘制的

来了解一下canvas的浏览器兼容性问题，如下图所示。（截图自can i use）

canvas-炫丽的倒计时效果Canvas绘图与动画基础

tips：刚刚拿去ie8下测了一下，什么反应都没有，提前设定好的，如果该浏览器不支持的话要提示的也不提示，

开发者工具中的Element中的代码也什么都没有。

canvas-炫丽的倒计时效果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-炫丽的倒计时效果Canvas绘图与动画基础

　　　　　　　　　　图一

canvas-炫丽的倒计时效果Canvas绘图与动画基础

　　　　　　　　　　　　图二

代码连接： https://github.com/HappyAlice/Canvas-Countdown/blob/master/Countdown.html

　　　　　　　　时间记录：2016-8-8 22：54  （明天继续更新）

2016-8-10 （嗯，一个大写的十号，今天心情真好，解决了个时间轴的问题，还有昨天开始接触了手机端，好开心~）

原文地址：http://www.cnblogs.com/lal-fighting/p/5750479.html

　

相关文章