扣丁学堂为你解析HTML5实例之canvas绘图技术(一)

2018-08-09 13:29:39 352浏览

本篇教程探讨了HTML5的canvas绘图技术详解，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。希望给参加HTML5培训的同学一点帮助。

<

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

1.1浏览器不兼容问题

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

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

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

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

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

//例如：

<canvasid="cavsElem">

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

</canvas>

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

1.2创建画布

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

注意：

不能使用CSS样式控制canvas元素的宽高，否则会导致绘制的图形拉伸。

重新设置canvas标签的宽高属性会导致画布擦除所有的内容。

可以给canvas画布设置背景色

1.3canvas坐标系

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

1.4绘制线径

获取上下文对象(CanvasRenderingContext2D)

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

varmcanvas=document.getElementById("mcanvas");

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

5.绘制图形(stroke)

//语法：

ctx.stroke();

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

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

//语法：

ctx.strokeStyle=“#ff0000”;

ctx.lineWidth=4;//值为不带单位的数字，并且大于0

6.填充图形(fill)

//语法：

ctx.fill();

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

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

//语法：

ctx.fileStyle=“#0000ff”;

7.canvas绘制的基本步骤：

第一步：获得上下文=>canvasElem.getContext('2d');

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

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

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

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

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

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

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

<script>

varmcanvas=document.getElementById("mcanvas");//获得画布

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

mcanvas.width=900;//重新设置标签的属性宽高

mcanvas.height=600;//千万不要用canvas.style.height

mcanvas.style.border="1pxsolid#000";//设置canvas的边

//绘制三角形

mcontext.beginPath();//开始路径

mcontext.moveTo(100,100);//三角形，左顶点

mcontext.lineTo(300,100);//右顶点

mcontext.lineTo(300,300);//底部的点

mcontext.closePath();//结束路径

mcontext.stroke();//描边路径

</script>

案例：理解canvas基于状态的绘图

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

<script>

varmcanvas=document.getElementById("mcanvas");//获得画布

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

mcanvas.width=900;//重新设置标签的属性宽高

mcanvas.height=600;//千万不要用canvas.style.height

mcanvas.style.border="1pxsolid#000";//设置canvas的边

mcontext.strokeStyle="#ff0000";//设置画笔的颜色

mcontext.lineWidth=2;//设置画笔的粗细

mcontext.fillStyle="#00ff00";//设置填充图形的颜色

//绘制三角形

mcontext.beginPath();//开始路径

mcontext.moveTo(100,100);//三角形，左顶点

mcontext.lineTo(300,100);//右顶点

mcontext.lineTo(300,300);//底部的点

mcontext.closePath();//结束路径

mcontext.stroke();//描边路径

//mcontext.fill();//填充图形

//绘制矩形

mcontext.beginPath();//开启了一个新状态（新线径），

//新状态可以继承之前状态的样式，

//但是当前状态设置的所有样式只能用于当前状态。

//mcontext.strokeStyle="#00ff00";//为当前状态设置的样式

mcontext.moveTo(500,100);//起始点

mcontext.lineTo(800,100);//上边

mcontext.lineTo(800,300);//右边

mcontext.lineTo(500,300);//下边

mcontext.closePath();

mcontext.stroke();

1.5绘制矩形

快速创建矩形rect()方法

语法：ctx.rect(x,y,width,height);

*解释：x,y是矩形左上角坐标，width和height都是以像素计

*rect方法只是规划了矩形的路径，并没有填充和描边。

2.创建描边矩形

语法：ctx.strokeRect(x,y,width,height);

参数跟rect(x,y,width,height)相同，注意此方法绘制完路径后立即进行stroke绘制。

3.创建填充矩形

语法：ctx.fillRect(x,y,width,height);

参数跟rect(x,y,width,height)相同，此方法执行完成后，立即对当前矩形进行fill填充。

4.清除矩形（clearReact）

语法：ctx.clearRect(x,y,width,hegiht);

*解释：清除某个矩形内的绘制的内容，相当于橡皮擦。

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

<script>

varmcanvas=document.getElementById("mcanvas");//获得画布

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

mcanvas.width=900;//重新设置标签的属性宽高

mcanvas.height=600;//千万不要用canvas.style.height

//rect方法只是规划了矩形的路径，并没有填充和描边，需要单独描边或填充。

mcontext.rect(20,20,300,200);

mcontext.stroke();

//快速创建一个描边的矩形

mcontext.strokeRect(400,20,300,200);

//快速创建一个填充的矩形

mcontext.fillRect(20,300,300,200);

//在画布上创建一个矩形区域，该矩形区域中的图形都会被清除

mcontext.clearRect(120,350,100,100);

</script>

以上就是扣丁学堂HTML5培训小编给大家分享的文章，希望对小伙伴们有所帮助，想要了解更多关于HTML5开发方面内容的小伙伴可以登录扣丁学堂官网咨询。扣丁学堂不仅有专业的HTML5培训班供大家学习，还有与时俱进的课程体系和大量的HTML5在线视频教程让学员免费观看学习，想要快速学习HTML5开发就到由专业老师授课的扣丁学堂学习吧。扣丁学堂H5技术交流群：559883758。

【关注微信公众号获取更多学习资料】

 

 

查看更多关于“HTML5开发技术资讯”的相关文章>>