html5 ctx,HTML5 Canvas（基础知识）

最近笔者在学习HTML5的新元素，会分享一些基础知识以及小例子，最终使用实现一个绘制简单图表(条形图、线图或者饼图)的js库，会更新一到两篇文章~

下面我们开始吧~

确认宽度和高度

我们首先应该指定标签即画布的宽度和高度属性，并在开始和闭合标签之间添加后备信息：

Canvas is not supported.

取得绘图上下文

调用canvas的getContext()方法，这个方法接收一个参数，即上下文的名字：

var canvas = document.getElementById("canvas");

if(canvas.getContext) {

var context = canvas.getContext("2d")

}

上述例子中，我们在调用getContext()方法时，首先检测其是否存在，这是由于有的浏览器遇到HTML规范之外的标签时，也会创建一个DOM对象，比如我们在Chrome中尝试以下代码：

document.getElementById("ppp");

//

因此即使当前浏览器不能兼容HTML规范中的canvas元素，同样会创建DOM对象，可其中却不存在getContext()。

context上下文对象中包含了绘图需要的一系列属性和方法，大家在阅读本文时，记得区分属性和方法，改变属性会影响到后续的绘图效果，而调用方法往往是一次性的。

绘制简单的2D图形

坐标原点

2D上下文的坐标默认开始于左上角，原点坐标为(0, 0)，使用translate(x, y)可以更改坐标原点。

填充

填充，就是用指定的样式，比如颜色、渐变或图像填充指定区域，对应的上下文属性为fillStyle，默认值为#000000， 比如：

context.fillStyle = "orange";

描边

描边就是在指定区域边缘画指定样式的线，比如：

context.strokeStyle = "grey";

绘制矩形

矩形是唯一一个可以在2D上下文中直接话的形状，其他的都需要绘制路径，可以使用3个方法直接绘制矩形。

fillRect(x, y, width, height)

可以绘制一个由fillStyle指定填充样式的矩形，比如：

context.translate(100, 100)

context.fillStyle = "#99cccc";

context.fillRect(-100, -50, 200, 100);

context.fillStyle="#3399cc";

context.fillRect(-60, -30, 120, 60);

strokeRect(x, y, width, height)

可以绘制一个由strokeStyle lineWidth lineCap lineJoin等属性指定描边样式的矩形，比如：

context.strokeStyle = "#99cccc";

context.lineWidth = "50";

context.lineJoin = "bevel";

context.strokeRect(0, 0, 400, 200);

属性名

含义

取值

lineCap

线条末端的形状

butt平头round圆头square方头

lineWidth

线条宽度

整数

lineJoin

线条相交的方式

round圆交bevel斜交mitter斜接

clearRect(x, y, width, height)