- canvas是h5的标签,该标签定义图形,比如图表和其他图像。该标签是行级元素。<canvas>标签只是图形容器,必须使用脚本来绘制图形。canvas标签是h5新增的标签,对于很多浏览器都具有兼容性,虽然具有兼容性,但通过canvas标签可以制作许多图形和好看的图表、图像以及一些动画效果,甚至可以只使用canvas标签来制作一款小游戏。在说canvas之前先说一说面向对象中的自定义事件。
- 我们都知道,无论是面向对象还是其他,DOM元素都具有一些事件,比如:onclick、onmousedown...等。这些都是系统自带的,若开发人员想要自己定义事件和自定义事件绑定该如何实现?那么,这次自定义事件或许对你会有一些帮助。那么,我们就用一些例子来和大家说一说自定义事件。
- 例:
- <body>
- <div id="div">
- </div>
- <script>
- var div = document.getElementsByTagName("div")[0];
- function addEvent(element, type, fn) {
- element.obj = element.obj || {};
- element.obj[type] = element.obj[type] || [];
- element.obj[type].push(fn);
- }
- function firEvent(element, type) {
- var arr = element.obj[type];
- for (var i = 0; i < arr.length; i++) {
- arr[i]();
- }
- }
- addEvent(div, "abc",
- function() {...
- });
- fireEvent(div, "abc");
- </script>
- //JQuery $("#div").on("hello",function(){...}); $("#div").trigger("hello");//绑定自定义事件
- </body>
- 书归正传,接下来和大家来唠一唠canvas。我们依然还是以一个例子来解析一下canvas.
- 例:
- <body>
- <canvas id="canvas">
- </canvas>
- <script>
- var canvas = document.getElementById('canvas');
- canvas.width = 500;
- canvas.height = 500;
- canvas.style.background = "hotpink";
- var ctx = canvas.getContext("2d");
- ctx.beginPath();
- ctx.moveTo(100, 100);
- ctx.lineTo(400, 400);
- ctx.closePath();
- ctx.strokeStyle = "yellow";
- ctx.lineWidth = "10";
- ctx.stroke();
- ctx.fillStyle = "blue"ctx.fill();
- </script>
- </body>
- 以上面例子来解析一下canvas中各个语法和属性的含义。
- 在canvas坐标系中,从最左上角的0,0开始,x向右增大,y向下增大
- (1)wideth:设置canvas的宽。canvas的默认宽为300px。设置canvas的宽高只能通过canvas.width的方式来进行对canvas宽高的设置和修改。
- (2)height:设置canvas的高。canvas的默认高为150px。
- (3)getContext("2d"):得到canvas的上下文场景(获得画布的控制权),2d表示为平面效果。若想要3d效果,则将2d设置成webgl.只有获得画布的控制权才可以在canvas画布上绘制。
- (3)moveTo(x,y):设置绘制路径的起点,相当于移动画笔到某个位置
- (4)lineTo(x,y):从上一点绘制一条直线到x,y这个坐标点
- (5)stroke():描边,根据路径绘制线,路径只是草稿,真正绘制线必须执行stroke
- (6)fill():填充,是将闭合的路径的内容填充具体的颜色
- (7)lineWidth:绘制线的宽度
- (8)beginPath():开始路径
- (9)closePath():闭合路径
- (10)strokeStyle:描边的样式
- (11)fillStyle:填充的样式
- 下面通过几个案例来和大家看一下通过canvas绘制图形。
例1:绘制表格
- <canvas>
- </canvas>
- <script>
- var canvas = document.getElementsByTagName("canvas")[0];
- var ctx = canvas.getContext("2d");
- canvas.width = 500;
- canvas.height = 500;
- for (var i = 0; i <= 500; i += 25) {
- ctx.moveTo(i, 0);
- ctx.lineTo(i, 500);
- ctx.moveTo(0, i);
- ctx.lineTo(500, i);
- }
- ctx.stroke();
- </script>
- 效果图:
- ![这里写图片描述](http://img.blog.csdn.net/20171027195534125?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGF2ZW5kZXJzdWU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
- 例2:
- 矩形1:
- <canvas>
- </canvas>
- <script type="text/javascript">
- var canvas = document.getElementsByTagName("canvas")[0];
- var ctx = canvas.getContext("2d");
- canvas.width = 500;
- canvas.height = 500;
- ctx.rect(100, 200, 300, 400); //rect(x,y,width,height),可以直接绘制矩形
- ctx.strokeStyle = "black";
- ctx.stroke();
- ctx.fillStyle = "aquamarine";
- ctx.fill();
- </script>
- 矩形2
- <canvas></canvas>
- <script type="text/javascript">
- var canvas=document.getElementsByTagName("canvas")[0];
- var ctx=canvas.getContext("2d");
- canvas.width=500;
- canvas.height=500;
- ctx.strokeStyle="black";
- ctx.strokeRect(100,200,300,400);//绘制矩形路径的同时也描边
- ctx.fillStyle="aquamarine";
- ctx.fillRect(100,200,300,400);//绘制矩形路径的同时填充
- </script>
- 效果图:
- ![这里写图片描述](http://img.blog.csdn.net/20171027195753522?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGF2ZW5kZXJzdWU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
- 例3:圆弧
- <canvas>
- </canvas>
- <script type="text/javascript">
- var canvas = document.getElementsByTagName("canvas")[0];
- var ctx = canvas.getContext("2d");
- canvas.width = 400;
- canvas.height = 400;
- ctx.beginPath();
- ctx.arc(200, 200, 200, 0, Math.PI / 2, false); //arc(x,y,r:半径,sAngle:开始的角度,eAngle:结束角度,counterclockwise:是否是逆时针,true是逆时针,false是顺时针,默认为false),绘制圆弧
- ctx.stroke();
- </script>
- 效果图:
- ![这里写图片描述](http://img.blog.csdn.net/20171027201146032?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGF2ZW5kZXJzdWU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
- 例4:饼图
- <canvas>
- </canvas>
- <script type="text/javascript">
- var data = [{
- value: 0.1,
- color: "#9370db"
- },
- {
- value: 0.3,
- color: "#6495ed"
- },
- {
- value: 0.2,
- color: "#ffe4b5"
- },
- {
- value: 0.3,
- color: "#f08080"
- },
- {
- value: 0.1,
- color: "#556b2f"
- }];
- var canvas = document.getElementsByTagName("canvas")[0];
- var ctx = canvas.getContext("2d");
- canvas.width = 500;
- canvas.height = 500;
- var start = 0;
- var end = 0;
- for (var i = 0; i < data.length; i++) {
- end = start + Math.PI * 2 * data[i].value;
- ctx.beginPath();
- ctx.moveTo(250, 250);
- ctx.arc(250, 250, 200, start, end);
- ctx.fillStyle = data[i].color;
- ctx.fill();
- start = end;
- }
- </script>
- 效果图:
- ![这里写图片描述](http://img.blog.csdn.net/20171027200052870?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGF2ZW5kZXJzdWU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
- 通过canvas还可以绘制很多图形,大家可以自己回去试一试。
来源: