HTML5 _ H5 Canvas

H5 Canvas

什么是html5 canvas？

<canvas>元素可以定义一张画布，可以通过JavaScript脚本语言在canvas元素上进行绘图。

<canvas>元素仅仅是一张画布，可以设置宽度和高度；而真正去画图、画线、画文字、填充颜色、描边、渐变这些都是JavaScript脚本语言在该canvas画布上去进行的，甚至可以去添加一个帧的概念，这就是动画或游戏啦。

这里是一个用canvas画图做的小游戏（推荐使用chrome浏览器进行测试，小游戏可能加载上有些问题，多刷几次，多点几次鼠标吧，这就是一个简陋的例子，主要想展示一下canvas能做什么）
总之，canvas元素就是一块画布，JavaScript可以调用一些命令来在canvas元素上作图。

浏览器兼容性

放心，HTML5就是考canvas元素来主打跨平台噱头的，所以canvas元素的浏览器兼容性是非常好的。下表是每种浏览器支持canvas元素的最低版本：

元素
<canvas>	4.0	9.0	2.0	3.1	9.0

创建第一个canvas元素

来吧，贫道带你创建第一个canvas元素。如下所示，注意两点：

一般来说，canvas元素都会标记id属性的，因为JavaScript中需要用；
为了方便展示，下面例子对canvas元素设置了外边框颜色。

<canvas id="myCanvas" width="200" height="100" style="border:1px solid LightGray;"></canvas>

运行一下

画线

刚才那个是一个空的canvas元素，现在贫道带你来画一条线段。

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();

运行一下

画圆圈

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

运行一下

填充文字

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello 专否", 16, 50);

运行一下

描边文字

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello 专否", 16, 50);

运行一下

线性渐变

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// 创建线性渐变方式
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "Tomato");
grd.addColorStop(1, "White");

// 选择指定范围，以刚才创建的线性渐变进行填充
// fillRect函数的前两个参数分别是起始坐标
// fillRect函数的后两个参数分别是填充的长度和高度
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 180, 80);

运行一下

球形渐变（辐射形渐变）

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// 创建球形渐变方式
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "Tomato");
grd.addColorStop(1, "White");

// 选择指定范围，以刚才创建的球形渐变进行填充
// fillRect函数的前两个参数分别是起始坐标
// fillRect函数的后两个参数分别是填充的长度和高度
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

运行一下

绘制图片

注意图片预加载问题：
下面介绍两种方法，但是不管是方法一还是方法二，都得注意图片预加载问题。点击方法一的“运行一下”，很有可能会看不到图片，但是刷新几次测试页面，就可以看到图片了；这是因为对img.src赋值后，图片尚未加载完毕就进行了drawImage函数，所以操作失败；多刷几次是因为图片已经在浏览器缓存的原因。

方法二的测试并不是没有预加载问题，只是进行drawImage是在点击按钮之后，此时图片早已加载完毕。因此，不管是哪种方法，还是在什么应用场景下，使用drawImage函数前，一定要保证此时图片已经加载完毕。

方法一：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image;
img.src = "https://logo.zhuanfou.com/draw_by_jerkz.jpg";
ctx.drawImage(img,10,10,220,306);

运行一下

方法二：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("picture1");
ctx.drawImage(img,10,10,220,306);

运行一下

关于Retina屏幕的提示：

大部分macbook用户的屏幕都是retina高清视网膜显示屏；这就是为啥在canvas画布上的线条或者图片都似乎有些模糊的原因，同样是一张图片，以img元素显示和放在canvas元素中显示的，canvas元素中的图片很有可能是比img元素中的模糊。模糊的原因就是汝的电脑屏幕很高端。

之后会有关于Canvas的专题教程 —_—

H5 Canvas

推广