HTML5 绘制图形canvas 初次接触
来源:互联网 发布:跑步轨迹软件 编辑:程序博客网 时间:2024/05/12 15:29
今天初次接触了HTML5中的一个新增元素——canvas元素,通过canvas,我们可以绘制出自定义的图形和图像,创造出更加丰富多彩的web界面。在我的理解中,他其实就相当于Android中的canvas对象,给我们提供了一块画布,我们要做的就是在上面作画,而在html5中,我们是使用JavaScript来实现paint画笔的功能。接下来,我们就通过一些简单的小例子来了解canvas中的知识。
1.在界面中放置canvas元素
首先我们来看一下如何在html代码中放置一个canvas元素。
<span style="font-size:14px;"> <body onload="draw('canvas')" align="center"> <canvas id="canvas" width="400" height="400"></canvas> </body></span>如上,首先我们还是要指定id,width,height三个属性,虽然canvas是html5中新增一个元素,但它的放置方法与其他元素并没有什么区别。我们添加了一个宽高都是400的canvas元素,并设置他的id是"canvas"。在这里我们还要设置canvas的位置居中,这里我们要注意不能将align="center"放在canvas元素标签中,因为他指定的是canvas中绘制的内容,而我们要设置的是canvas元素,所以要添加在body中。
在body中,我们除了设置canvas居中外,我们还使用了onload="draw('canvas')",当页面加载时调用脚本文件中的draw函数来进行图形描画。
<span style="font-size:14px;"><script type="text/javascript" src="script.js"></script></span>
在脚本导入之处,我们通过上述语句在本页面中导入了script.js这个脚本文件,然后使用该脚本文件,进行图片描绘。
这样我们整个html的代码就编写完成了,我们可以新建一个JavaScript文件script.js,然后编写我们的脚本文件,绘制我们想要的图形。
2.绘制一个简单矩形
现在开始编写我们的脚本文件,在这个文件中,只存在draw()这一个方法,我们在其中写我们的主体代码。用canvas绘制图形时,有一些基本的步骤。
1)取得canvas元素
<span style="font-size:14px;">var canvas = document.getElementById(id);</span>
首先通过document.getElementById(id)这个方法取得canvas对象,我们是通过draw()方法传进了一个canvas对象的id值,只有拿到了对象我们才能调用这个对象的方法和对对象进行操作。
2)取得上下文(context)
<span style="font-size:14px;">var ctx = canvas.getContext("2d");</span>
context对象中封装了很多绘图功能的方法,获取这个对象的方法是调用canvas对象的getContext()方法,将参数设置为"2d"(如上),看到2d时是不是一阵激动呢,但很抱歉的是目前html5还只支持2d。或许未来的某天我们可以绘制出3d的图形吧。
我们可以通过console.info(context)在网页中console输出查看context的信息,从中我们可以清楚地看到在context对象中分装了很多方法。接下来我们就要慢慢学习如何使用这些方法来进行图形的绘制。
3)设置绘制的样式
<span style="font-size:14px;">ctx.fillStyle="#eeeeff";</span>
在进行图形绘制的时候,首先要设定好绘图的样式(style),然后再调用户相关的方法进行绘制,所谓绘图的样式,一般我们都是指设定图形的颜色,但并不仅限于图形的颜色,还存在其他的样式。例如:
*设定填充图形的样式
fillStyle——填充的样式,在该属性中填入填充的颜色值,默认为黑色
*设定图像边框的样式
strokeStyle——图形边框的样式,在该属性中填入边框的颜色值,默认为黑色
*设置图形边框的宽度
lineWidth——任何直线都可以设置宽度,值越大线越粗
4)指定颜色值
绘图时填充的颜色或边框的颜色分别通过fillStyle属性和strokeStyle属性来进行设置。
颜色的设定可以采用不同的方法:
*直接使用颜色名,例如“red”,"blue";
*使用十六进制的颜色值,例如"#eeeeff";
*通过rgb(红色值,绿色值,蓝色值)或者rgba(红色值,绿色值,蓝色值,透明度)函数来指定颜色值
5)填充和绘制边框
<span style="font-size:14px;">ctx.fillRect(0,0,400,400);</span>
分别使用fillRect()和strokeRect()方法来填充矩形和绘制矩形边框。这两个方法的定义如下:
context.fillRect(x,y,width,height)
strokeRect(x,y,width,height)
他们具有相同的参数,x,y为矩形起点的横坐标和纵坐标,就是矩形左上角那个点的坐标,width和height设置矩形的宽度和高度。通过这四个参数,一个矩形的大小和位置也就确定了。但这里有个要注意的地方,坐标原点是画布的最左上角,而不是页面的最左上角。所以计算坐标的时候我们一定要考虑到这点。
通过上面的设置,我们进入网页输入网址进行查看,就可以看到一个简易的矩形被绘制完成了
3.绘制一个复杂的图形
这里要补充一个canvas中的方法
context.clearRect(x,y,width,height)清除矩形区域
该方法实质上也是画矩形,但他是将区域内的颜色编程透明,实现清除效果。四个参数也分别为起点横纵坐标还有清除区域的宽高。
通过调用以上所说的方法,我们可以照葫芦画瓢画出一个稍微复杂的图形,效果图如下:
这个图形实质上就是在不同的坐标画了6个矩形,然后在中间部分进行了区域清除。
js代码如下:
<span style="font-size:14px;">/* * 初次使用canvas */function draw(id) {var canvas = document.getElementById(id);if(canvas==null)return false;var ctx = canvas.getContext("2d");//实践表明在不设置fillStyle下的默认fillStyle=blackctx.fillRect(0,0,100,100);//第一个矩形//实践表明在不设置strokeStyle下的默认strokeStyle=blackctx.strokeRect(120,0,100,100);//第二个矩形//设置纯色ctx.fillStyle = "red";ctx.strokeStyle = "blue";ctx.fillRect(0,120,100,100);//第三个矩形ctx.strokeRect(120,120,100,100);//第四个矩形//设置透明度 实践证明透明度>0,值越小越透明ctx.fillStyle = "rgba(255,0,0,0.2)";ctx.strokeStyle = "rgba(255,0,0,0.2)";ctx.fillRect(240,0,100,100);//第五个矩形ctx.strokeRect(240,120,100,100);//第六个矩形ctx.clearRect(50,50,250,100);//清除矩形区域}</span>
4.结语
初次接触html5,我感觉这种做web前端的,因为可以很方便的看到自己的成果,所以更容易激发人的学习兴趣,html5新添加的canvas属性也让前端有了更多可以施展的地方,自定义很多不同的、美观的图形。html5真的是大势啊↖(^ω^)↗。。。
- HTML5 绘制图形canvas 初次接触
- html5 canvas基本图形绘制
- HTML5使用canvas绘制图形
- HTML5使用canvas绘制图形
- HTML5 Canvas元素绘制图形
- 使用 HTML5 canvas 绘制精美的图形
- html5-learning-003-canvas(2)-绘制图形
- Html5实例: <canvas>绘制渐变图形
- Html5学习------canvas绘制径向渐变图形
- html5 新元素 canvas 绘制基础图形
- 使用 HTML5 canvas 绘制精美的图形
- HTML5开发之绘制图形canvas
- HTML5中使用canvas绘制复杂图形
- HTML5之Canvas绘图——使用Canvas绘制图形
- HTML5之Canvas 2D入门2 - Canvas绘制图形
- HTML5利用Canvas绘制图形(绘制渐变、模式、变换)
- HTML5利用Canvas绘制图形(Canvas基本知识、绘制矩形、使用路径和图形组合)
- UGUI初次接触之Canvas
- 权限的控制
- 易用7z压缩管理软件 1.0 源码(API实现非调用7z命令行)
- js判断所有表单项不为空则提交表单
- Sublime添加Package Control 进行应用管理
- 树形框-插入项目,字节集操作
- HTML5 绘制图形canvas 初次接触
- 彗星虚表操作模块1.1-百万数据毫秒级加入超级列表框-增加数据库绑定
- iphone6 电影支持什么格式
- 自定义Theme(1)
- Android camera 竖直拍照 获取竖直方向照片
- [WebKit内核]EasyCKL开源浏览器库 6.1 支持调试运行了
- 剑指offer|复杂链表的复制
- 给无边框窗口增加阴影
- 在线打字练习