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