上一章HTML5教程请查看：html5新input输入类型
在本教程中，你将学习如何使用HTML5 canvas元素在web页面上绘制图形。
canvas是什么？HTML5 canvas元素可以通过JavaScript在网页上绘制图形。canvas最初是由Apple引入的，用于Mac OS的仪表板小部件和Safari web浏览器中的图形。后来它被Firefox、谷歌Chrome和Opera采用。现在，canvas是下一代web技术的新HTML5规范的一部分。
默认情况下，<
canvas>
元素的宽度为300px，高度为150px，没有任何边框和内容。但是，可以使用CSS height和width属性定义自定义宽度和高度，而border可以使用CSS border属性应用。
理解canvas画布坐标画布是一个二维矩形区域。画布左上角的坐标为(0,0)，称为原点，右下角的坐标为(画布宽度，画布高度)。下面是canvas默认坐标系统的一个简单演示。
文章图片
提示：将鼠标指针放在上面演示的画布区域内，你将获得它当前相对于画布的坐标。所有主要的web浏览器都支持< canvas> 元素，如Chrome、Firefox、Safari、Opera、ie9及以上。
在画布上绘制路径和形状在本节中，我们将进一步了解如何使用新引入的HTML5 canvas元素和JavaScript绘制基本路径和形状。
下面是在2D HTML5画布上绘制路径和形状的基本模板。
<
!DOCTYPE html>
<
html lang="zh_CN">
<
head>
<
meta charset="utf-8">
<
title>在画布上绘制<
/title>
<
script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// 绘图
};
<
/script>
<
/head>
<
body>
<
canvas id="myCanvas" width="300" height="200"><
/canvas>
<
/body>
<
/html>
除了7到11的直线外，其它的直线都很直。附加到窗口的匿名函数，加载页面时将执行onload事件。加载页面后，我们可以使用document.getElementById()方法访问canvas元素。稍后，我们通过将2D传递到画布对象的getContext()方法来定义2D画布上下文。
画一条线你能在画布上画的最基本的路径是一条直线。为此目的使用的最基本的方法是moveTo()、lineTo()和stroke()。
moveTo()方法定义将光标绘制到画布上的位置，而lineTo()方法用于定义线条端点的坐标，最后使用stroke()方法使线条可见。我们来看一个例子：
<
script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.moveTo(50, 150);
context.lineTo(250, 50);
context.stroke();
};
<
/script>
画一个弧你可以使用arc()方法创建弧，该方法的语法如下：
context.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise);
以下示例中的JavaScript代码将在画布上绘制弧线。
<
script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.arc(150, 150, 80, 1.2 * Math.PI, 1.8 * Math.PI, false);
context.stroke();
};
<
/script>
画一个矩形可以使用rect()方法创建矩形和正方形形状。该方法需要矩形的x、y位置和宽度、高度四个参数。
rect()方法的基本语法如下：
context.rect(x, y, width, height);
他按照JavaScript代码将绘制一个以画布为中心的矩形。
<
script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.rect(50, 50, 200, 100);
context.stroke();
};
<
/script>
画一个圆没有特定的方法来创建像矩形的rect()方法那样的圆。但是，可以使用arc()方法创建一个完全封闭的arc，比如circle。
使用arc()方法绘制完整圆的语法如下：
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
下面的示例将以画布为中心绘制一个完整的圆。
<
script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.arc(150, 100, 70, 0, 2 * Math.PI, false);
context.stroke();
};
<
/script>
在描边上应用样式和颜色笔划的默认颜色是黑色，它的厚度是一个像素。但是，你可以使用strokeStyle和lineWidth属性分别设置stoke的颜色和宽度。
下面的示例将绘制一条宽度为5像素的橙色线。
<
script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.lineWidth = 5;
context.strokeStyle = "orange";
context.moveTo(50, 150);
context.lineTo(250, 50);
context.stroke();
};
<
/script>
你还可以使用lineCap属性为行设置端点样式，有三种样式的端点对接，圆形和方形。这里有一个例子：
<
script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.lineWidth = 10;
context.strokeStyle = "orange";
context.lineCap = "round";
context.arc(150, 150, 80, 1.2 * Math.PI, 1.8 * Math.PI, false);
context.stroke();
};
<
/script>
在画布形状中填充颜色你还可以使用fillStyle()方法在画布形状中填充颜色。
下面的示例将向你展示如何在矩形形状中填充纯色。
script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.rect(50, 50, 200, 100);
context.fillStyle = "#FB8B89";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
};
<
/script>
提示：在设计画布上的形状时，建议在stroke()方法之前使用fill()方法，以便正确呈现笔画。
类似地，你也可以使用fillStyle()方法来填充圆形内的纯色。
<
script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.arc(150, 100, 70, 0, 2 * Math.PI, false);
context.fillStyle = "#FB8B89";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
};
<
/script>
在画布形状中填充渐变颜色还可以在画布形状中填充渐变颜色，渐变就是从一种颜色到另一种颜色的平滑视觉过渡，梯度有两种类型——线性梯度和径向梯度。
创建线性渐变的基本语法如下：
var grd = context.createLinearGradient(startX, startY, endX, endY);
下面的示例使用createLinearGradient()方法在矩形内填充线性渐变颜色。让我们试一试，看看它是如何工作的：
<
script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.rect(50, 50, 200, 100);
var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);
grd.addColorStop(0, '#8ED6FF');
grd.addColorStop(1, '#004CB3');
context.fillStyle = grd;
context.fill();
context.stroke();
};
<
/script>
类似地，可以使用createRadialGradient()方法用径向渐变填充画布形状。创建径向渐变的基本语法如下所示：
var grd = context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius);
下面的示例使用createRadialGradient()方法来填充圆形内的径向渐变颜色。让我们试一下，看看它是如何工作的：
<
script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.arc(150, 100, 70, 0, 2 * Math.PI, false);
var grd = context.createRadialGradient(150, 100, 10, 160, 110, 100);
grd.addColorStop(0, '#8ED6FF');
grd.addColorStop(1, '#004CB3');
context.fillStyle = grd;
context.fill();
context.stroke();
};
<
/script>
在画布上绘制文本你还可以在画布上绘制文本。这些文本可以包含任何Unicode字符。下面的示例将在画布上绘制一个简单的问候消息“Hello World!”。
<
script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.font = "bold 32px Arial";
context.fillText("Hello World!", 50, 100);
};
<
/script>
你还可以在画布上设置文本的颜色和对齐方式，如下所示：
<
script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.font = "bold 32px Arial";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillStyle = "orange";
context.fillText("Hello World!", 150, 100);
};
<
/script>
还可以使用strokeText()方法对文本应用描边。此方法将为文本的周长着色，而不是填充它。但是，如果希望同时设置画布文本的填充和描边，可以同时使用fillText()和strokeText()方法。
<
script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.font = "bold 32px Arial";
context.textAlign = "center";
context.textBaseline = "middle";
context.strokeStyle = "orange";
context.strokeText("Hello World!", 150, 100);
};
<
/script>
【html5 canvas绘图 – HTML5教程】提示：在设计画布上的文本样式时，建议在strokeText()方法之前使用fillText()方法，以便正确呈现笔画。
推荐阅读
- html5 SVG绘制以及和canvas的区别 – HTML5教程
- html5 input新输入类型 – HTML5教程
- html ISO语言代码 – HTML教程
- html URL编码 – HTML教程
- html媒体类型和字符编码参考文档 – HTML教程
- html颜色名称参考文档 – HTML教程
- html ASCII完全表查询 – HTML教程
- html ASCII码参考文档 – HTML教程
- html字体参考文档 – HTML教程