前备知识 -- 使用canvas制作动画

程序员文章站 2024-01-20 22:31:58

...

前端动画有很多种实现方式，CSS3动画animation、transition等，flash，js+dom等。

H5新元素canvas非常适合开发游戏。直接粘贴上常用绘制的代码啦！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body>
    <canvas id="canvas" width="500" height="500" style="background: #ddd"></canvas>
    <!--注意，这里的width，height设置，不是CSS样式的长宽设置-->
    <canvas id="canvas2" width=500px height=500px style="background: grey"></canvas>
    <script src="js/rect.js"></script>
    <script src="js/line.js"></script>
    <script src="js/arc.js"></script>
    <script src="js/text.js"></script>
    <script src="js/lineWidth.js"></script>
    <script src="js/img.js"></script>
</body>
</html>

//获取指定的canvas元素
var canvas = document.getElementById("canvas");
//调用canvas元素的getContext 方法访问获取2d渲染的上下文
var context = canvas.getContext("2d");

//填充矩形(x,y,width,height)
context.fillRect(10,10,80,80);
//空心矩形
context.strokeRect(100,100,80,80)

// 开始设置路径
context.beginPath();
// 设置路径原点
context.moveTo(10,100);
// 设置路径到达的点
context.lineTo(10,180);
// 输出路径轮廓
context.stroke();

//绘制三角形
context.beginPath();
context.moveTo(10,200);
context.lineTo(10,300)
context.lineTo(110,300);
//context.lineTo(10,200);
context.closePath();
context.stroke();
//context.fill();

//context.arc(x,y,radius,startAngle,endAngle,anticlockwise)

//var degree = 1; 
// 表示 1°
//var radians = degree * (Math.PI / 180); 
// 0.0175弧度

//方向默认是anti-clockwise=false，角度起始为3点钟方向

// 开始创建新路径
context.beginPath();
// 创建一个半圆圆弧
context.arc(300, 100, 80, 0, Math.PI);
// 调用 stroke 绘制该路径
context.stroke();


//绘画圆角矩形
var x = 200; // 圆角矩形左上角横坐标
var y = 200; // 圆角矩形左上角纵坐标
var width = 250; // 圆角矩形的宽度
var height = 250; // 圆角矩形的高度
var radius = 50; // 圆角的半径

// 开始创建新路径
context.beginPath();
// 绘制左上角圆角
context.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);
// 绘制顶边路径
context.lineTo(width - radius + x, y);
// 绘制右上角圆角
context.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);
// 绘制右边路径
context.lineTo(width + x, height + y - radius);
// 绘制右下角圆角
context.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);
// 绘制底边路径
context.lineTo(radius + x, height +y);
// 绘制左下角圆角
context.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);
// 闭合路径 也可使用 context.lineTo(x, y + radius);
context.closePath();
// 设置绘制的颜色
context.strokeStyle = '#188eee';
context.stroke();

// context.fillText(text,x,y);
// context.strokeText(text,x,y);
// (x,y)是文本左下角的坐标

context.fillText('fillText',10,320)
context.strokeText('fillText',10,330)
context.font = '60px 黑体';
//要设置 font 的属性值时，必须至少包含两个值，即"字体大小 字体名称"，
//如果没有这两个值的任何一个，那么设置就不会生效。
context.fillStyle = "red";
//="#ff0000"  ="rgb(255,0,0)" ="rgba(255,0,0,1)" 
//符合CSS3 颜色值标准
context.fillText('fillText2',10,400)
context.strokeText('fillText2',10,490)

//修改线宽  context.lineWidth = number;
//默认是1

context.lineWidth = 5;
context.strokeRect(100,100,80,80)

//context.clearRect(x,y,width,height)
//整个画布的清除：context.clearRect(0,0,canvas.width,canvas.height)

var canvas = document.getElementById("canvas2");
var context = canvas.getContext("2d");

//context.drawImage(image,x,y,[width],[height])
var image = new Image();
image.src = 'img/canvas-logo.png';
//js中加载图片是异步的，用onload函数在图片加载完成后执行绘图
image.onload = function () {
    context.drawImage(image,0,0,250,250)
}

基本的canvas操作基本就是以上讲述的了，当然，如果还要继续深入的学习的话，还有很多很多得学的，比如保存和恢复绘画状态(save 和 store)、渐变、阴影、变形、合成、导出画布（getImageData）、像素操作等

推荐的书籍有：
《HTML5 CANVAS基础教程》
《HTML5 canvas开发详解》

学习的链接网址有：
Canvas 入门精通教程
 Html5 Canvas 学习笔记
 Canvas API

前备知识 -- 使用canvas制作动画

前备知识 -- 使用canvas制作动画

使用Canvas制作时钟动画的方法

使用Canvas制作时钟动画的方法

使用PIXI制作简单canvas逐帧动画的心得