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

Html5 学习系列（五）Canvas绘图API快速入门（2）

2014-08-29 09:50 676 查看

Canvas绘图API Demos

上一篇文章中，笔者已经给大家演示了怎么快速用Canvas的API绘制一个矩形出来。接下里我会在本文中给各位介绍Canvas的其他API：绘制线条、绘制椭圆、绘制图片、图片处理等...如果想获得更好的阅读效果请点击老马的独立博客地址。

一、Canvas绘制线条

Context对象的beginPath方法表示开始绘制路径，moveTo(x, y)方法设置线段的起点，lineTo(x, y)方法设置线段的终点，stroke方法用来给透明的线段着色。moveto和lineto方法可以多次使用。最后，还可以使用closePath方法，自动绘制一条当前点到起点的直线，形成一个封闭图形，省却使用一次lineto方法。

[code]
<body>
<canvas id="demoCanvas" width="500" height="600">
</canvas>
<script type="text/javascript">
//通过id获得当前的Canvas对象
var canvasDom = document.getElementById("demoCanvas");
//通过Canvas Dom对象获取Context的对象
var context = canvasDom.getContext("2d");
context.beginPath(); // 开始路径绘制
context.moveTo(20, 20); // 设置路径起点，坐标为(20,20)
context.lineTo(200, 200); // 绘制一条到(200,20)的直线
context.lineTo(400, 20);
context.closePath();
context.lineWidth = 2.0; // 设置线宽
context.strokeStyle = "#CC0000"; // 设置线的颜色
context.stroke(); // 进行线的着色，这时整条线才变得可见
</script>
</body>

[/code]
查看在线演示

二、Canvas绘制文本

Context上下文对象的fillText(string, x, y)方法是用来绘制文本，它的三个参数分别为文本内容、起点的x坐标、y坐标。使用之前，需用font设置字体、大小、样式（写法类似与CSS的font属性）。与此类似的还有strokeText方法，用来添加空心字。另外注意一点：fillText方法不支持文本断行，即所有文本出现在一行内。所以，如果要生成多行文本，只有调用多次fillText方法。

以下是代码Demo：

[code]
<canvas id="demoCanvas" width="500" height="600"></canvas>
<script type="text/javascript">
//通过id获得当前的Canvas对象
var canvasDom = document.getElementById("demoCanvas");
//通过Canvas Dom对象获取Context的对象
var context = canvasDom.getContext("2d");
context.moveTo(200,200);

// 设置字体
context.font = "Bold 50px Arial";
// 设置对齐方式
context.textAlign = "left";
// 设置填充颜色
context.fillStyle = "#005600";
// 设置字体内容，以及在画布上的位置
context.fillText("老马!", 10, 50);
// 绘制空心字
context.strokeText("blog.itjeek.com!", 10, 100);
</script>

查看在线演示

三、Canvas绘制圆形和椭圆

在上一篇文章中，笔者已经跟大家介绍过了绘制矩形，绘制其他形状，比如圆形等，都是一个思路，只不过是方法不同罢了。那接下里给各位演示一小绘制圆形和椭圆。Context上下文的arc方法就是绘制圆形或者椭圆，arc方法的x和y参数是圆心坐标，radius是半径，startAngle和endAngle则是扇形的起始角度和终止角度（以弧度表示），anticlockwise表示做图时应该逆时针画（true）还是顺时针画（false）。

以下是绘制图形的Demo：

<canvas id="demoCanvas" width="500" height="600"></canvas>
<script type="text/javascript">
//通过id获得当前的Canvas对象
var canvasDom = document.getElementById("demoCanvas");
//通过Canvas Dom对象获取Context的对象
var context = canvasDom.getContext("2d");
context.beginPath();//开始绘制路径
//绘制以 （60,60）为圆心，50为半径长度，从0度到360度（PI是180度），最后一个参数代表顺时针旋转。
context.arc(60, 60, 50, 0, Math.PI * 2, true);
context.lineWidth = 2.0;//线的宽度
context.strokeStyle = "#000";//线的样式
context.stroke();//绘制空心的，当然如果使用fill那就是填充了。
</script>

[/code]
查看在线演示

还不赶快动手试一下？

四、Canvas绘制图片

Canvas绘制图片应该是他的一大特点或者是亮点吧。当然配合File的API，让JS变得无可匹敌。那接下里给大家演示一下怎样绘制图片，并且做出一个立体效果出来。

以下是绘制图片的Demo：

<canvas id="demoCanvas" width="500" height="600"></canvas>
<script type="text/javascript">
//通过id获得当前的Canvas对象
var canvasDom = document.getElementById("demoCanvas");
//通过Canvas Dom对象获取Context的对象
var context = canvasDom.getContext("2d");
var image = new Image();//创建一张图片
image.src = "Images/a.png";//设置图片的路径
image.onload = function() {//当图片加载完成后
for (var i = 0; i < 10; i++) {//输出10张照片
//参数：（1）绘制的图片  （2）坐标x，（3）坐标y
context.drawImage(image, 100 + i * 80, 100 + i * 80);
}
};
</script>

[/code]
查看在线演示

还不赶快动手试一下？

五、总结

Canvas总算介绍了最基本的用法了。当然本文大量借鉴了其他网站的例子。作者也是把最基本的精华部分罗列了一下。总体来说Canvas绘制图片和文本、形状都不是很难，API代码上手难度基本就是初级。但是由此而带来的非常多的可能，让Html5真正的强大到无可比拟的地步。

当然本文并没有涉及到Canvas3D绘制的相关内容，而且关于Canvas绘制渐变色、绘制阴影、图片的相关处理操作等，这些内容，如果读者确实需要的可以自行搜索查找相关资料或者直接阅读Html5的最新标准文档。

本文参考：http://javascript.ruanyifeng.com/htmlapi/canvas.html

本文永久地址：http://blog.itjeek.com/blogs/Html5-5-canvas2.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航