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