用html5的canvas和JavaScript创建一个绘图程序的简单

2020-03-24 18:51:11

字体：大中小

来源：转载

供稿：网友

本文将引导你使用canvas和JavaScript创建一个简单的绘图程序。首先准备容器Canvas元素，接下来所有的事情都会在JavaScript里面。XML/HTML Code复制内容到剪贴板
canvasid= canvasInAPerfectWorld width= 490 height= 220 /canvas
context=document.getElementById('canvasInAPerfectWorld').getContext( 2d
开始绘图过程首先我们需要存储绘图路径点坐标，addClick函数添加坐标点值到数组JavaScript Code复制内容到剪贴板
varclickX=newArray(); varclickY=newArray(); varclickDrag=newArray();//存储路径点 varpaint;//是否绘制，mousedown时置为true functionaddClick(x,y,dragging) { clickX.push(x); clickY.push(y); clickDrag.push(dragging); }
redraw函数每次调用整个canvas就会重新绘制一次。首先我们清空画布上内容，设置绘制线条颜色粗细线条连接方式。然后两点之间绘制一段路径，将数组中的坐标点依次绘制出来XML/HTML Code复制内容到剪贴板
functionredraw(){ context.clearRect(0,0,context.canvas.width,context.canvas.height);//清除画布内容 context.strokeStyle= #df4b26 ;//设置线条颜色 context.lineJoin= round ;//当两条线条交汇时，创建圆形边角 context.lineWidth=5;//线条粗细 for(vari=0;i clickX.length;i++){ context.beginPath();//开始一条路径，或重置当前的路径 if(clickDrag[i] i){ context.moveTo(clickX[i-1],clickY[i-1]); }else{ context.moveTo(clickX[i]-1,clickY[i]); } context.lineTo(clickX[i],clickY[i]); context.closePath(); context.stroke();//绘制路径 } }
1 mousedown事件绘图这点击到画布上时，将触发该事件执行。调用了addClick函数，并将paint置为true。JavaScript Code复制内容到剪贴板
$('#canvas').mousedown(function(e){ varmouseX=e.pageX-this.offsetLeft; varmouseY=e.pageY-this.offsetTop; paint=true; addClick(e.pageX-this.offsetLeft,e.pageY-this.offsetTop); redraw(); });
2 mousemove事件mousedown中设置的paint为true后，鼠标移动时触发mousemove事件执行，将鼠标移动的所有点记录下来，并不断调用redraw重绘画布。
JavaScript Code复制内容到剪贴板
if(paint){ addClick(e.pageX-this.offsetLeft,e.pageY-this.offsetTop,true); redraw(); } });
3 mouseup事件mouseup鼠标点击后松开或者拖拽后松开，表示绘制完成该路径，将paint置为false。
XML/HTML Code复制内容到剪贴板
以上这篇用html5的canvas和JavaScript创建一个绘图程序的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持phpstudy。原文地址：http://www.cnblogs.com/fangsmile/archive/2016/07/05/5644611.htmlhtml教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：突袭HTML5之Javascript API扩展5—其他扩展(应用缓存

下一篇：详解a href=#与 a href=javascript-void(0) 的区别