Web前端
文章平均质量分 86
木易光
1111111111111
展开
-
Html5 Canvas+Javascript实现一个简单画图程序(一)
目标:铅笔工具绘画,绘制常见几何形状(直线,矩形,圆形,多边形)。实现:画图的核心是依靠html5 的canvas标签,一个canvas的声明类似下面的形式: 这样就在你的html页面里面写进了一个宽为800像素,高为500像素的canvas。然后有了canvas还不够,就像它的英文意思一样,它只是供你施展才华的画布。为了能够画图图形,你还需要什么呢?画笔(conte原创 2012-11-16 10:08:26 · 6104 阅读 · 0 评论 -
Html5 Canvas+Javascript实现一个简单画图程序(二)
上篇文章已经知道了绘制图形的基本代码了,但是还不能根据鼠标来绘制,本文将会介绍方法。js的鼠标事件:我们使用到了四个:mousedown(鼠标按下)mouseup(鼠标松开)mousemove(鼠标移动)mouseout(鼠标离开).从字面意思就很好理解,分别是鼠标按下、松开、移动、离开时就会触发。关于这几个事件,有一篇文章做了很好的总结。http://www.cnblogs.com/原创 2012-11-17 22:38:26 · 3024 阅读 · 1 评论 -
Html5 Canvas+Javascript实现一个简单画图程序(三)
绘制几何图形 拿矩形举个例子吧,当鼠标在canvas按下的时候你记录下当前的坐标点,当鼠标拖动一段距离(但是不能拖出canvas),然后松开的时候再记录一个坐标,就可以计算出width和height了,然后你就得到了画一个矩形所需要的所有参数。你当然可以像铅笔绘图一样,保存进去4个数组,分别记录beginX, beginY, width, height。但是还有好多别的图形要做,每个都弄一个原创 2012-11-18 10:57:11 · 3266 阅读 · 3 评论