初探HTML5——canvas元素（一）
canvas元素在国内被翻译成"画布"，我们暂且这么记。它是一种平面的绘图容器，使用canvas可以绘制图形、制作特效。一、如何开始
在Web页面使用canvas元素很简单，只需要使用canvas标签即可。因为canvas本身不提供绘制能力，这部分工作委托给了JavaScript，所以需要给元素一个id方便后续获取对象。width和height属性告诉浏览器可绘制图形区域的大小（范围）。如果不设置width和height，将不能正常显示效果。
二、如何操作
要想操作canvas首先要获取其元素，尔后获取context对象。context是HTML5内置的一个对象，可以用来绘制路径、图形、添加图像等。虽然很不喜欢叫做上下文，但是为了便于小伙伴们理解，一下还是会直接成为上下文。
/*获取canvas对象的context（绘图上下文）*/
var context=document.getElementById('canvas').getContext("2d");
/*
*等价于第一行代码
* var canvas=document.getElementById("canvas");
* var context =canvas.getContext("2d");
*/
三、绘制直线
【初探HTML5——canvas元素（一）】在平面内两点可以确定一条直线，通过x，y坐标可以确定一点。因此绘制一条直线的前提是需要定义2组坐标即两点。敲黑板，在浏览器中坐标系统是从左上角开始（0,0）。向右是x轴的正值方向，向下是y轴正值方向。开始绘制直线调用moveTo(x,y)方法，含义是告诉context对象在画布中(x,y)位置绘制一点作为起点。lineTo(x,y)方法是在画布中加入新的点。确定了两点之后，还需要调用stroke()方法按照路径将其绘制出来，忘记调用stroke()方法会看不到要绘制内容。
/*准备绘制直线*/
context.moveTo(200,200);
context.lineTo(200,300);
//按绘制路径顺序绘制直线
context.stroke();
四、完整代码
在示例中为window对象绑定了onload事件，主要是让文档加载完毕后执行绘制操作。
canvas演示 - 锐客网
一起浏览下效果图：
文章图片
绘制的第一条直线 PS：是不是感觉canvas其实也没想象中那么神秘？加油，下一节我们继续。
推荐阅读
- 急于表达——往往欲速则不达
- 慢慢的美丽
- 《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量
- 2019-02-13——今天谈梦想（）
- 考研英语阅读终极解决方案——阅读理解如何巧拿高分
- Ⅴ爱阅读，亲子互动——打卡第178天
- 低头思故乡——只是因为睡不着
- 取名——兰
- 每日一话（49）——一位清华教授在朋友圈给大学生的9条建议
- 广角叙述|广角叙述 展众生群像——试析鲁迅《示众》的展示艺术