Canvas基础教程(章节1)

这是我的第一篇Canvas 基础教程，我先简述一下什么是Canvas 。 H5 新增内容，允许脚本语言动态渲染图像，是由 HTML 代码配合高度和宽度属性而定义出的可绘制区域。JavaScript 代码可以访问该区域，类似于其他通用的二维 API，通過一套完整的绘图函数来动态生成图形。一些可能的用途，包括使用 Canvas 构造图形，动画，游戏和图片。 Canvas 对象的属性 height 属性: 画布的高度。和一幅图像一样，这个属性可以指定为一个整数像素值或者是窗口高度的百分比。当这个值改变的时候，在该画布上已经完成的任何绘图都会擦除掉。默认值是 150。 width 属性: 画布的宽度。和一幅图像一样，这个属性可以指定为一个整数像素值或者是窗口宽度的百分比。当这个值改变的时候，在该画布上已经完成的任何绘图都会擦除掉。默认值是 300。那Canvas 绘制的图形或动画有哪些优点呢？

比如下面这张图：

先不考虑视频，即便是 gif 动图，这样一张未压缩的图片，大小至少有 4MB ，浏览器渲染这张图片的时候，相当于下载了一首 “流畅” 品质的歌曲，如果你希望这张图片作为背景图，那它会变得十分模糊。那假设是一幅 Canvas 画布呢？它的大小只有 2KB ，即便你是 2G 网络，它也能够迅速的加载完毕，并且经得住无限放大。唯一的缺点是：图片你只需要往上一拉，而 Canvas 要写100行代码。 Canvas 动画的制作原理 1、更新绘制的对象（比如位置的移动） 2、清除画布 3、在画布上重新绘制对象简单一句话概括：不断的绘制与清除。 教程开始： 在HTML中添加Canvas非常简单，只需要在 < body> 里，添加上 < canvas> 标签就可以了！标签通常需要指定一个id属性 (脚本中经常引用)，width 和 height 属性定义的画布的大小。可以参考下面的代码。

<body>
    <canvas id="canvas" width="200" height="100">一张Canvas 画布</canvas>
</body>

获取画布

var c=document.getElementById(“canvas”); var ctx=c.getContext(“2d”);

这两段代码必填，这是一个模板，从前期来讲无论你画什么它都不会改变，这里就不细讲了，不容易理解。

Canvas - 文本

font - 定义字体 fillText(text,x,y) - 在 canvas 上绘制实心的文本 strokeText(text,x,y) - 在 canvas 上绘制空心的文本

Canvas - 图像

drawImage(image,x,y)

Canvas颜色

ctx.fillStyle = " "

Canvas 坐标

canvas 是一个二维网格。 canvas 的左上角坐标为 (0,0)。 X 坐标向右增加。 Y 坐标向着画布底部增加。

Canvas - 路径

moveTo(x,y) 定义线条开始坐标 lineTo(x,y) 定义线条结束坐标

如果在canvas中绘制圆形，可以使用 arc(x,y,r,start,stop)

Canvas - 渐变

createLinearGradient(x,y,x1,y1) - 创建线条渐变 createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

画布的使用

ctx.font=“bold 20px Arial”; ctx.textAlign=“Hello W3Cschool”; ctx.fillText(“Hello W3Cschool”, 20, 40);

在canvas 中，transform 属性依然生效，不过被简写为：ctx.translate(x,y)、ctx.rotate(x) 等

需要注意的是：rotate 中不能再填写角度了，应改为：

ctx.rotate((Math.PI / 180) * 25)

意为：顺时针旋转 25 deg

我们来写一个简单的小案例，看一下效果如何：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

</head>
<body>
	<canvas id="canvas"  width="500" height="500"></canvas>
<script>
    var c=document.getElementById("canvas");
	var ctx=c.getContext("2d");
	ctx.translate(100, 150);
	ctx.fillText("after translate", 20, 40);
	ctx.fillStyle = "gray";
	ctx.fillRect(10,10, 100, 100);
	ctx.rotate( (Math.PI / 180) * 25);
	ctx.fillStyle = "orange";
	ctx.fillRect(10,10, 100, 100);
</script>
</body>
</html>

Canvas 最神奇的地方在于不断添加，当你绘制好一个不错的图形时，让它频繁的克隆自身，这样你就得到了 N 个绘制好的图形，这也是开头动画的原理。如：

<body>
	<canvas id="canvas"  width="500" height="500"></canvas>
<script>
    var c=document.getElementById("canvas");
	var ctx=c.getContext("2d");
	ctx.strokeRect(10,10,30,20);
	ctx.scale(2,2);
	ctx.strokeRect(10,10,30,20);
	ctx.scale(2,2);
	ctx.strokeRect(10,10,30,20);
	ctx.scale(2,2);
	ctx.strokeRect(10,10,30,20);
</script>

效果图：

那我们用刚刚学到的内容做一个小练习：

<body>
    <canvas id="canvas"  width="500" height="500">
    <script>
        var testCanvas = document.getElementById("canvas");
        // 获取getContext()对象
        var context = testCanvas.getContext("2d");
 
        context.fillStyle = "red";
        context.fillRect(10, 10, 100, 100);
        // 保存状态（红色）
        context.save();
 
        context.fillStyle="blue";
        context.fillRect(60, 60, 100, 100);
        // 保存状态（蓝色）
        context.save();
 
        // 恢复状态（红色）
        context.restore();
        context.fillRect(120, 120, 100, 100);
 
        // 恢复状态（蓝色）
        context.restore();
        context.fillRect(180, 180, 100, 100);
        context.beginPath();
    </script>
</body>

看看你得到的图案是不是下面这样：

读到这里，你是不是想问，那些移动的 canvas 动画是如何制作的？

<style>
	.onfo {
		width: 600px;
		height: 400px;       
	}
	.onfo canvas {
		border: 1px solid #333;
	}
</style>
</head>
<body>
    <div class="onfo">
        <canvas id="canvas"  width="500" height="500">  
    </div>
<script>
    var testCanvas = document.getElementById("canvas");
    var context = testCanvas.getContext("2d");
    var x = 0;
    var y = 0;
    var timer = null;

    //清除画布 再次绘制（循环操作）
    function draw(){
        // 不断改变绘制对象的水平位置
        x++;
        // 清除画布
        context.clearRect(0, 0, 600, 400);
        context.beginPath();
        context.fillStyle = "skyblue";
        context.arc(x, 200, 80, 0, 2 * Math.PI, true);
        context.closePath();
        // 绘制轮廓
        context.stroke();
        // 填充颜色
        context.fill();
    }
    
    // 设置计时器
    setInterval(draw, 20);
</script>
</body>

来看下效果图，是不是和我的一样