canvas 绘制直线 并选中_Day 3 学习Canvas这一篇文章就够了

一、canvas简介

​ 是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。

​ 它最初由苹果内部使用自己MacOS X WebKit推出，供应用程序使用像仪表盘的构件和 Safari 浏览器使用。 后来，有人通过Gecko内核的浏览器 (尤其是Mozilla和Firefox)，Opera和Chrome和超文本网络应用技术工作组建议为下一代的网络技术使用该元素。

​ Canvas是由HTML代码配合高度和宽度属性而定义出的可绘制区域。JavaScript代码可以访问该区域，类似于其他通用的二维API，通过一套完整的绘图函数来动态生成图形。

​ Mozilla 程序从 Gecko 1.8 (Firefox 1.5)开始支持 , Internet Explorer 从IE9开始 。Chrome和Opera 9+ 也支持 。

二、Canvas基本使用

2.1 元素

​ 看起来和标签一样，只是 只有两个可选的属性 width、heigth 属性，而没有 src、alt 属性。

​ 如果不给设置widht、height属性时，则默认 width为300、height为150,单位都是px。也可以使用css属性来设置宽高，但是如宽高属性和初始比例不一致，他会出现扭曲。所以，建议永远不要使用css属性来设置的宽高。

###替换内容

​ 由于某些较老的浏览器(尤其是IE9之前的IE浏览器)或者浏览器不支持HTML元素，在这些浏览器上你应该总是能展示替代内容。

​ 支持的浏览器会只渲染标签，而忽略其中的替代内容。不支持 的浏览器则 会直接渲染替代内容。

用文本替换：

 你的浏览器不支持canvas,请升级你的浏览器

用 替换：

结束标签不可省

与 元素不同，元素需要结束标签()。如果结束标签不存在，则文档的其余部分会被认为是替代内容，将不会显示出来。

2.2 渲染上下文(Thre Rending Context)

​ 会创建一个固定大小的画布，会公开一个或多个 渲染上下文(画笔)，使用 渲染上下文来绘制和处理要展示的内容。

​ 我们重点研究 2D渲染上下文。 其他的上下文我们暂不研究，比如， WebGL使用了基于OpenGL ES的3D上下文 (“experimental-webgl”) 。

var canvas = document.getElementById('tutorial');//获得 2d 上下文对象var ctx = canvas.getContext('2d');

2.3 检测支持性

var canvas = document.getElementById('tutorial');if (canvas.getContext){ var ctx = canvas.getContext('2d'); // drawing code here} else { // canvas-unsupported code here}

2.4 代码模板

 Canvas tutorial