JavaScript入门之Canvas(一): 2D Context_H5之家 - 中国HTML5教程资源分享第一站

标签：lock 基线处理信息 rgb 距离 ont ext 9.png

概念

Canvas 是 HTML5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图形。例如，它可以用于绘制图形，制作照片，创建动画，甚至可以进行实时视频处理或渲染。自HTML5添加Canvas这个库，很快便得到了普及和发展，各个主流浏览器也速速支持，可见其强大。目前为止，IE9+、Firefox、Safari、Opera、Chrome、iOS版Safari以及Android版WebKit都已经基本上支持canvas标签。

添加Canvas元素

首先，我们需要在html页面中创建一个<canvas>元素，并指定一个绘图区域（width，height）：

<canvas id=width=height=>抱歉，你的浏览器版本不支持canvas</canvas>

如果不指定，则默认宽度为 300px, 高度 150px。标签中的内容不会显示，当你的浏览器不支持<canvas>标签时，才会显示这些信息。

宽度和高度定义的绘图区域可以理解为一张画纸，你要做的便是在这张画纸上画东西，而你要在画纸上画图，自然需要一只画笔，它在canvas里面叫做Context（上下文）。

2D Context

为什么Context前面有个2D呢，没错，它还有个3D Context，叫做WebGL，这篇文章不做讨论。

要取得这只“画笔”，需要用到getContext()方法，并传入"2d"作为参数：

); );

好，我们有了这只“画笔”，就可以为所欲为了。我们可以画矩形、弧线和路径等。

还有一点要说明，2D Context的坐标开始于元素的左上角，原点坐标是(0,0)。所有坐标值都基于这个原点计算，x 方向自左向右为正，y 方向自上而下为正。

我们先来随便画点东西：

context.fillRect(10, 10, 50, 50);

没错，我们画了个矩形，这个矩形从（10，10）开始画，宽和高都为50px。

技术分享

填充还是描边

这只画笔有两个基本的作用，画画的时候总要先画个轮廓，先有个边，然后再给它上色。

技术分享

因此，这只画笔第一个作用便是描边(stroke)，第二个作用便是上色，也就是填充(fill)。专业一点的话来说：

填充，就是用指定的样式（颜色、渐变或图像）填充图形；描边，就是只在图形的边缘画线。

是不是还漏点什么？没错，我画画的时候不可能只有一种颜色的笔吧。所以我要更改描边或者填充的属性，就要用到两个属性：fillStyle、strokeStyle

自定义画笔属性

fillStyle、strokeStyle这两个属性的值可以是字符串、渐变对象或模式对象，而且它们的默认值都是"#000000"。如果为它们指定表示颜色的字符串值，可以使用CSS中指定颜色值的任何格式，包括颜色名、十六进制码、 rgb、rgba、hsl 或hsla。

); ); //设置描边颜色、填充颜色 context.strokeStyle = ; context.fillStyle = ; //描边、填充（画一个矩形） context.strokeRect(10, 10, 50, 50); context.fillRect(10, 10, 50, 50); //描边、填充（画第二个矩形） context.strokeRect(35, 35, 50, 50); context.fillRect(35, 35, 50, 50);