HTML5+CSS3---新增绘图技术

HTML 5的绘图技术

canvas元素是HTML5中新添加的一个元素，该元素是HTML5中的一个亮点。Canvas元素就像一块画布，通过该元素自带的API结合JavaScript代码可以绘制各种图形和图像以及动画效果。

浏览器不兼容问题

• ie9以上才支持canvas, 其他chrome、firefox、苹果浏览器等都支持

• 只要浏览器兼容canvas，那么就会支持绝大部分api(个别最新api除外)

• 移动端的兼容情况非常理想，基本上随便使用

• 2d的支持的都非常好，3d（webgl）ie11才支持，其他都支持

• 如果浏览器不兼容，最好进行友好提示，提示内容只有在浏览器不支持时才显示。

   <canvas id="cavsElem">
          你的浏览器不支持canvas，请升级浏览器
  </canvas>
  

• 浏览器不兼容，也可以使用flash等手段进行优雅降级

创建画布

在页面中创建canvas元素与创建其他元素一样，只需要添加一个<canvas>标记即可。该元素默认的宽高为300*150，可以通过元素的width属性和height属性改变默认的宽高。

注意：

• 不能使用CSS样式控制canvas元素的宽高，否则会导致绘制的图形拉伸。
• 重新设置canvas标签的宽高属性会导致画布擦除所有的内容。
• 可以给canvas画布设置背景色

canvas坐标系

在开始绘制任何图像之前，我们先讲一下canvas的坐标系。canvas坐标系是以左上角0,0处为坐标原点，水平方向为x轴，向右为正；垂直方向为y轴，向下为正。如下图所示：

绘制线径

1.获取上下文对象(CanvasRenderingContext2D)

首先，获取canvas元素，然后调用元素的getContext(“2d”)方法，该方法返回一个CanvasRenderingContext2D对象，CanvasRenderingContext2D 对象提供了一组用来在画布上绘制的图形函数，使用该对象就可以在画布上绘图了。

var mcanvas  = document.getElementById("mcanvas");
var mcontext = mcanvas.getContext("2d");

2.设置绘制起点(moveTo)

//语法：
ctx.moveTo(x, y); 

• 解释：设置上下文绘制路径的起点。相当于移动画笔到某个位置。
• 参数：x,y 都是相对于 canvas坐标系的原点（左上角）。
• 注意：
  绘制线段前必须先设置起点，不然绘制无效。如果不进行设置，就会使用lineTo的坐标当作moveTo

3.绘制直线(lineTo)

//语法：
ctx.lineTo(x, y);

• 解释：从上一步设置的绘制起点绘制一条直线到(x, y)点。
• 参数：x,y 目标点坐标。

4.路径的开始和闭合

//开始路径：
ctx.beginPath();
//闭合路径：
ctx.closePath();

解释：如果绘制路径比较复杂，必须使用路径开始和结束。闭合路径会自动把最后的线头和开始的线头连在一起。

beginPath:
核心的作用是将不同绘制的形状进行隔离，每次执行此方法，表示重新绘制一个路径，跟之前的绘制的墨迹可以进行分开样式设置和管理。

closePath:
如果需要闭合，必须写在stroke()之前，才会起作用。

绘制图形(stroke)

//语法：
ctx.stroke();

• 解释：根据路径绘制线。路径只是草稿，真正绘制线必须执行stroke

画笔的颜色和粗细

在绘制之前，还可以对画笔的颜色和粗细进行设置进行设置，方法如下：

//语法：
ctx.strokeStyle = “#ff0000”;
ctx.lineWidth = 4;  //值为不带单位的数字，并且大于0

填充图形(fill)

//语法：
ctx.fill();

• 解释：对已经画好的图形进行填充颜色。

在填充之前，可以对所填充的颜色进行设置，方法如下：

//语法：
ctx.fillStyle = “#0000ff”;

canvas绘制的基本步骤：

第一步：获得上下文（笔） =>canvasElem.getContext(‘2d’);

第二步：开始路径规划 =>ctx.beginPath()

第三步：移动起始点 =>ctx.moveTo(x, y)

第四步：绘制线(线条、矩形、圆形、图片…) =>ctx.lineTo(x, y)

第五步：闭合路径 =>ctx.closePath();

第六步：绘制描边 =>ctx.stroke();

案例：通过上面所学的方法绘制一个三角形。

<canvas id="mcanvas">你的浏览器不支持canvas，请升级浏览器</canvas>
	<script>		
		var mcanvas  = document.getElementById("mcanvas");	//获得画布

		var mcontext = mcanvas.getContext("2d");	//获得上下文

		mcanvas.width = 900;     //重新设置标签的属性宽高
    	mcanvas.height = 600;    //千万不要用 canvas.style.height

    	//绘制三角形
	    mcontext.beginPath();        //开始路径
	    mcontext.moveTo