首页 > 代码库 > HTML5 & CSS3 初学者指南(4) – Canvas使用
HTML5 & CSS3 初学者指南(4) – Canvas使用
介绍
传统的HTML主要用于文本的创建，可以通过<img>标签插入图像，动画的实现则需要第三方插件。在这方面，传统的HTML极其缺乏满足现代网页多媒体需求的能力。HTML5的到来，带来了新的成员<canvas>标签。
什么是 Canvas？
HTML5 的 Canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，你可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
创建 Canvas 元素
向 HTML5 页面添加 Canvas 元素。
规定元素的 id、宽度和高度：
<canvas id="myCanvas" width="200" height="100"></canvas>
通过 JavaScript 来绘制
Canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
<script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);</script>首先，JavaScript 使用 id 来寻找 Canvas 元素：
var c=document.getElementById("myCanvas");其次，创建 context 对象：
var cxt=c.getContext("2d");然后，getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。下面的两行代码绘制一个红色的矩形：
cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75);
最后，使用fillStyle 方法，可将其染成红色，fillRect 方法规定了形状、位置和尺寸。
绘图方法：
线条以及填充
moveTo（）方法使用X和Y作为参数，在 Canvas 上设置参数指定的线条起始点。
lineTo（）方法使用X和Y作为参数，在 Canvas 上创建上一个点到参数指定点的路径。
stroke（）方法绘制出了 Canvas 上，moveTo（）指定的点到 lineTo（）指定点的路径线条。stroke（）方法没有参数。
beginPath（）方法用于开始一个新路径或重置当前路径，没有参数。
closePath（）方法用于创建从起始点到终点的路径，有效的闭合并形成路径的形状，没有参数。
fill（）方法用于为当前的路径填充样式。
JavaScript 代码：
<script type="text/javascript">var canvas = document.getElementById("mycanvas");var context = canvas.getContext("2d");
context.moveTo(250,50);
context.lineTo(150,100);
context.lineTo(250,150);
context.closePath();
context.stroke();
context.fill();</script>
文本
HTML5 提供了3个属性 font、textAlign 和 textBaseline，用于定义 Canvas 上文本的不同状态。
font 属性设置或获取字体属性，如字体样式、字重、字体大小和字体系列等。它遵循和 CSS 字体属性相同的语法。
textAlign 属性设置或获取文本内容的水平对齐方式。textAlign 可以设置成5个值："start", "end", "right", "left" 和 "center"
textBaseline 属性设置或获取文本内容的垂直对齐方式。textBaseline 可以设置成5个值："top", "bottom", "middle", "aplhabetic" 和 "hanging"。
渐变
strokeStyle 属性设置或获取 Canvas 上用于绘制路径的颜色、渐变和图案。
createLinearGradient（）方法通过将对象以值的形式分配给 strokeStyle 或者相关图形的填充属性，用于创建填充举行，圆形，线条和文本的渐变对象。
createLinearGradient有4个参数：
起点的X坐标
起点的Y坐标
终点的X坐标
终点的Y坐标
createLinearGradient（）方法必须与 addColorStop（）方法一起使用，来指定渐变对象中的不同颜色和相对的位置。
addColorStop（）方法指定了渐变对象的颜色和位置。
addColorStop（）有2个参数：
一个0.0到1.0之间的值，代表渐变中开始点和结束点的位置。
该点位置的颜色
JavaScript 代码：
<script type="text/javascript">var canvas=document.getElementById(‘mycanvas‘);var context=canvas.getContext(‘2d‘);var gradient=context.createLinearGradient(50,30,50,170);
gradient.addColorStop(0,"red");
gradient.addColorStop("0.1","orange");
gradient.addColorStop("0.3","yellow");
gradient.addColorStop("0.5","green");
gradient.addColorStop("0.7","blue");
gradient.addColorStop("0.9","indigo");
gradient.addColorStop(1,"violet");
context.fillStyle=gradient;
context.fillRect(50,30,250,140);</script>
图片
DrawImage（）方法用于绘制输入的图像，视频等到 Canvas 上。
DrawImage（）方法有4个参数：
放置图像的X坐标
放置图像的Y坐标
图像的宽度
图像的高度
getImageData（）方法通过从 Canvas 上指定的矩形里拷贝像素数据，来创建一个图形数据对象。
getImageData（）方法有4个参数：
复制的矩形左上角X坐标
复制的矩形左上角Y坐标
复制矩形的宽度
复制矩形的高度
putImageData（）方法用于将指定图像的像素数据放回到 Canvas 上来。
putImageData（）方法有7个参数：
ImageData 对象
ImageData 对象左上角的x坐标
ImageData 对象左上角的Y坐标
放置图像的X坐标
放置图像的Y坐标
绘制图像的宽度
绘制图像的高度
本系列 HTML5 / CSS3 的知识介绍已经全部结束了，希望对学习 HTML5 / CSS3 的朋友有所帮助。大家在使用前端知识进行开发时，还可以借助一些开发工具，如Wijmo，这是一款大而全面的前端 HTML5 / JavaScript UI控件集，能为企业应用提供更加灵活的操作体验，现已全面支持Angular 2。
本文出自 “葡萄城控件技术团队博客” 博客，谢绝转载！
HTML5 & CSS3 初学者指南(4) – Canvas使用