Canvas学习日记之一-绘制矩形
- 2016-05-19 11:33:31
- 幻音い
- 6201
温馨提示: 这篇文章于3066天前编写,现在可能不再适用或落后.
最近快到实习的日子了,想在加强一下技术。所以果断的去学习Canvas了,之后我会把我学习的Canvas都记录下来。
Canvas简介
Canvas是HTML5中的新标签,canvas顾名思义,画布标签。开发者可以使用canvas画布中绘制各种自己喜欢的图形,但Canvas的使用并不是直接用鼠标去画就能实现的。Canvas是通过Javascript脚本操作控制来绘制的。
Canvas可以用于制作图形,动画,游戏等各种有意思的东西。
浏览器支持
对于Canvas的支持,IE8及以下都不支持,其他浏览器大部分版本都是支持的(除非你用的很老很老的版本)。
想要绘制Canvas就先创建canvas标签,并附上id,高度宽度,设置一个基础样式即可。其余就都靠Javascript来实现了。
<canvas id="canvas" width="600" height="300" style="display:block;margin:30px auto;">您的浏览器不支持canvas</canvas>
``` 对于id的设置,不建议直接使用canvas,我在这里做演示,就先用canvas做id了。
在HTML5中,canvas的2d绘制环境提供了一套强大的绘图API,可以用它来实现一些精致的图形应用程序,但是一些需要数学来实现。
canvas可以绘制文本,线条,矩形,圆形及贝塞尔曲线,可以通过拖动鼠标来绘制,比如说制作一个画板。
绘制矩形及线条
canvas的2d绘图API提供了几个绘制矩形的方法。
clearRect(第一个点的X轴,第一个点的Y轴,第二个点的宽度,第二个点的高度)
strokeRect(第一个点的X轴,第一个点的Y轴,第二个点的宽度,第二个点的高度)
fillRect(第一个点的X轴,第一个点的Y轴,第二个点的宽度,第二个点的高度)
lineWidth属性 以像素为单位的线段宽度 取值范围 非零的正数 默认值 1.0
lineCap属性 浏览器如何绘制线段的端点 取值范围 butt,round,square 默认值butt
lineJoin属性 浏览器如何绘制线段的连接点 取值范围为 round,bevel,miter 默认值bevel
miterLimit属性 斜接线长度与二分之一线段宽的比值,如果斜接线的长度超过了该值,浏览器就会以bevel的方式来绘制
比如我们在canvas中绘制一个蓝色的正方形并且为20px的红色标签,连接点为round(round是有一个弧度的连接点)
<canvas id="canvas" width="600" height="300" style="display:block;margin:50px auto;">浏览器不支持canvas</canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas");//DOM获取canvas var cxt = canvas.getContext("2d");//获取canvas的2d绘图环境 cxt.fillStyle = "blue";//设置填充颜色为蓝色 cxt.strokeStyle = "red";//设置边框颜色为红色 cxt.lineWidth = 20;//设置线段宽度为20px cxt.lineJoin = "round";//设置线段连接点为round //在canvas一半的宽度与高度的地方填充一个宽50高50的正方形 cxt.strokeRect(canvas.width/2,canvas.height/2,50,50); //在canvas一半的宽度与高度的地方绘制一个宽50高50的线段 cxt.fillRect(canvas.width/2,canvas.height/2,50,50); </script>
``` 最后得到的效果图:
学习是靠一步一步的提升的。别放弃就行了。
下一次讲解渐变,颜色,透明度,阴影,路径等。
对于Canvas结合JS的事件处理来说更好控制Canvas中的元素。还可以制作各种有意义的东西。
阁下需要登录后才可以查看评论哦~