本文将正确引导你应用canvas和JavaScript建立1个简易的制图程序流程。
最先提前准备器皿Canvas元素，接下来全部的事儿都会在JavaScript里边。
XML/HTML Code拷贝內容到剪贴板
- <canvas id="canvasInAPerfectWorld" width="490" height="220"></canvas>
获得制图自然环境，context目标出示了用于在画布上制图的方式和特性
XML/HTML Code拷贝內容到剪贴板
- context = document.getElementById('canvasInAPerfectWorld').getContext("2d");
刚开始制图全过程
最先大家必须储存制图相对路径点座标，addClick涵数加上座标点值到数字能量数组
JavaScript Code拷贝內容到剪贴板
- var clickX = new Array();
- var clickY = new Array();
- var clickDrag = new Array();//储存相对路径点
- var paint;//是不是绘图，mousedown时置为true
- function addClick(x, y, dragging)
- {
- clickX.push(x);
- clickY.push(y);
- clickDrag.push(dragging);
- }
redraw涵数每次启用全部canvas就会再次绘图1次。最先大家清空画布上內容，设定绘图线条色调粗细线条联接方法。随后
两点之间绘图1段相对路径，将数字能量数组中的座标点先后绘图出来
XML/HTML Code拷贝內容到剪贴板
- function redraw(){
- context.clearRect(0, 0, context.canvas.width, context.canvas.height); // 消除画布內容
- context.strokeStyle = "#df4b26";//设定线条色调
- context.lineJoin = "round";//当两条线条交汇时，建立圆形边角
- context.lineWidth = 5;//线条粗细
- for(var i=0; i < clickX.length; i++) {
- context.beginPath();//刚开始1条相对路径，或重设当今的相对路径
- if(clickDrag[i] && i){
- context.moveTo(clickX[i⑴], clickY[i⑴]);
- }else{
- context.moveTo(clickX[i]⑴, clickY[i]);
- }
- context.lineTo(clickX[i], clickY[i]);
- context.closePath();
- context.stroke();//绘图相对路径
- }
- }
绘图全过程必须的恶性事件
1 mousedown恶性事件
制图这点一下到画布上时，将开启该恶性事件实行。启用了addClick涵数，并将paint置为true。
JavaScript Code拷贝內容到剪贴板
- $('#canvas').mousedown(function(e){
- var mouseX = e.pageX - this.offsetLeft;
- var mouseY = 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拷贝內容到剪贴板
- $('#canvas').mousemove(function(e){
- if(paint){
- addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
- redraw();
- }
- });
3 mouseup恶性事件
mouseup电脑鼠标点一下后松开或拖拽后松开，表明绘图进行该相对路径，将paint置为false。
XML/HTML Code拷贝內容到剪贴板
- $('#canvas').mouseup(function(e){
- paint = false;
- });
4 mouseleave恶性事件
mouseleave电脑鼠标离去canvas元素，将paint置为false。
XML/HTML Code拷贝內容到剪贴板
- $('#canvas').mouseleave(function(e){
- paint = false;
- });
以上这篇用html5的canvas和JavaScript建立1个制图程序流程的简易案例便是网编共享给大伙儿的所有內容了，期待能给大伙儿1个参照，也期待大伙儿多多适用脚本制作之家。
原文详细地址：http://www.cnblogs.com/fangsmile/archive/2016/07/05/5644611.html