Html5 Canvas+Javascript实现一个简单画图程序(一)

目标:
铅笔工具绘画,绘制常见几何形状(直线,矩形,圆形,多边形)。

实现:
画图的核心是依靠html5 的canvas标签,一个canvas的声明类似下面的形式:
  
[html] view plain copy
<canvas id="canvas" width="800px" height="500px"></canvas>

这样就在你的html页面里面写进了一个宽为800像素,高为500像素的canvas。
然后有了canvas还不够,就像它的英文意思一样,它只是供你施展才华的画布。为了能够画图图形,你还需要什么呢?画笔(context)和一双手(javascript)。
context取得的js代码如下:
  
[javascript] view plain copy
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d"); / /我们目前要做的是2d作图,而且好像暂时还不支持3d

好了,现在你有了画布和画笔,然后就是用你灵巧的手挥舞画笔了。
比如我们想要画一个直线,在这里我们使用到了context的如下方法:
  
[javascript] view plain copy
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才是真正把虚线勾勒出来。
多边形呢?重复利用划线处的两行代码,最后回到起始点就行了。这一点后面会有说到。
如果我们想画一个矩形呢?
  
[javascript] view plain copy
context.rect(beginX, beginY, width, height);

将会是你的选择;
想画圆的话选择arc()方法吧:
  
[javascript] view plain copy
context.arc(x, y, radius, startAngle, endAngle, antiClockwise);

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

web前端JavaScript技术交流群618522268

antiClockwise是一个布尔值,决定你的画圆方向是顺时针还是逆时针。
我们想画一个圆用
  
[javascript] view plain copy
context.arc(x, y, radius, 0 , 2 * Math.PI, false);

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

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

至此画几何图形的基本方法就知道了,下面是一个简单的示例:
[html] view plain copy
<!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>

web前端JavaScript技术交流群618522268

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复