您的位置：首页 > Web前端 > HTML5

HTML5 绘制图形canvas 初次接触

2016-06-25 14:32 323 查看

今天初次接触了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=black
ctx.fillRect(0,0,100,100);//第一个矩形
//实践表明在不设置strokeStyle下的默认strokeStyle=black
ctx.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 图形

相关文章推荐

新的分享

章节导航