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

Html5 Canvas+Javascript实现一个简单画图程序（一）

2012-11-16 10:08 956 查看

目标：

铅笔工具绘画，绘制常见几何形状（直线，矩形，圆形，多边形）。

实现：

画图的核心是依靠html5 的canvas标签，一个canvas的声明类似下面的形式：

　　

<canvas id="canvas" width="800px" height="500px"></canvas>

这样就在你的html页面里面写进了一个宽为800像素，高为500像素的canvas。

然后有了canvas还不够，就像它的英文意思一样，它只是供你施展才华的画布。为了能够画图图形，你还需要什么呢？画笔(context)和一双手(javascript)。

context取得的js代码如下：

　　

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d"); / /我们目前要做的是2d作图，而且好像暂时还不支持3d

好了，现在你有了画布和画笔，然后就是用你灵巧的手挥舞画笔了。

比如我们想要画一个直线，在这里我们使用到了context的如下方法：

　　

context.strokeStyle = “#000000”;
context.beginPath();
context.moveTo(beginX, beginY);
context.lineTo(endX, endY);
context.stroke();

strokeStyle的意义是设定颜色；beginPath表示我们要开始了，moveTo方法是把这支context画笔移动到(beginX, beginY)坐标点处，注意此时只是移动过去，并没有开始画，lineTo则是从(beginX, beginY)到（endX, endY）画一条“直线”，此时直线还未真正画上去，你可以理解为先打一个虚线，然后stroke才是真正把虚线勾勒出来。

多边形呢？重复利用划线处的两行代码，最后回到起始点就行了。这一点后面会有说到。

如果我们想画一个矩形呢？

　　

context.rect(beginX, beginY, width, height);

将会是你的选择；

想画圆的话选择arc()方法吧：

　　

context.arc(x, y, radius, startAngle, endAngle, antiClockwise);

arc方法中，x、y、radius自然是圆心横纵坐标和半径无疑了，startAngle代表开始的角度, endAngle代表结束的角度, 这两个角度的定义和我们在高中数学里面学到的定义有点不一样，如下图所示：

antiClockwise是一个布尔值，决定你的画圆方向是顺时针还是逆时针。

我们想画一个圆用

　　

context.arc(x, y, radius, 0 , 2 * Math.PI, false);

就行了。自然，稍作修改参数这个方法也可以用来画圆弧。

*关于canvas这几个方法的详细描述，以及更多有关canvas的介绍，见：

http://www.html5canvastutorials.com/

至此画几何图形的基本方法就知道了，下面是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
<title>Simple Demo</title>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
</head>
<body>
<canvas id = "myCanvas" width = "800px" height = "500px"></canvas>

<script type = "text/javascript" language="javascript">
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

//画直线
context.beginPath();
context.strokeStyle = "#000000";
context.moveTo(50, 50);
context.lineTo(400, 200);
context.stroke();
//画矩形
context.beginPath();
context.strokeStyle = "#ce0000";
context.rect(100,100,350,150);
context.stroke();
//画圆
context.beginPath();
context.strokeStyle = "#009100";
context.arc(300,300,100,0,2*Math.PI, true);
context.stroke();
</script>

</body>
</html>

但是上述还只是能静态的画出来，我们真正想要的是拖动鼠标动态地画出来。再写下去会不会有点太长了，那就放到下一篇吧。。

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

标签：

相关文章推荐

新的分享

章节导航