HTML5学习-使用 Canvas 来创建绘图应用程序_H5之家

HTML5学习-使用 Canvas 来创建绘图应用程序

HTML5学习-使用 Canvas 来创建绘图应用程序，有需要的朋友可以参考下。

原文地址：根据原文尝试了一下，很好的HTML5入门；<!DOCTYPE html> <html> <head> <script src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ var coloringCanvas = $("#coloringBook"); var context = document.getElementById("coloringBook").getContext("2d"); var clickX = new Array(); var clickY = new Array(); var clickDrag = new Array(); var paint; var colorPurple = "#cb3594"; var colorGreen = "#659b41"; var colorYellow = "#ffcf33"; var colorBrown = "#986928"; var curColor = colorPurple;//current use color var clickColor = new Array(); var sizeSmall = 3; var sizeNormal = 5; var sizeLarge = 10; var sizeHuge = 20; var curSize = sizeNormal; var clickSize = new Array(); var toolCrayon = "Crayon";//蜡笔 var toolMarker = "Marker";//记号笔 var toolEraser = "Eraser";//橡皮 var curTool = toolMarker; var canvasWidth = context.canvas.width; var canvasHeight = context.canvas.height; function addClick(x, y, dragging) { clickX.push(x); clickY.push(y); clickDrag.push(dragging); if(curTool == toolEraser){//如果为橡皮工具 clickColor.push("white");//颜色设置白色 }else{ clickColor.push(curColor); } clickSize.push(curSize); } function redraw(){ context.clearRect(0, 0, canvasWidth, canvasHeight); // Clears the canvas context.lineJoin = "round"; for(var i=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.strokeStyle = clickColor[i];//画笔颜色 context.lineWidth = clickSize[i];//画笔大小 context.stroke(); } //蜡笔工具处理 if(curTool == toolCrayon){ context.globalAlpha = 0.4; context.drawImage(crayonTextureImage, 0, 0, canvasWidth, canvasHeight); } context.globalAlpha = 1; } coloringCanvas.mousedown(function(e){ var mouseX = e.pageX - this.offsetLeft; var mouseY = e.pageY - this.offsetTop; paint = true; addClick(mouseX, mouseY); redraw(); }); coloringCanvas.mousemove(function(e){ if(paint){ addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true); redraw(); } }); coloringCanvas.mouseup(function(e){ paint = false; }); coloringCanvas.mouseleave(function(e){ paint = false; }); //clear the canvas $("#clearBtn").click(function(e){ //清空画布 context.clearRect(0, 0, canvasWidth, canvasHeight); // Clears the canvas //清空绘画信息数组 clickX = []; clickY = []; clickDrag = []; clickColor = []; clickSize = []; }); //choose a color $("#colorPurpleBtn").click(function(e){ curColor = colorPurple; }); $("#colorGreenBtn").click(function(e){ curColor = colorGreen; }); $("#colorYellowBtn").click(function(e){ curColor = colorYellow; }); $("#colorBrownBtn").click(function(e){ curColor = colorBrown; }); //choose a size $("#sizeSmallBtn").click(function(e){ curSize = sizeSmall; }); $("#sizeNormalBtn").click(function(e){ curSize = sizeNormal; }); $("#sizeLargeBtn").click(function(e){ curSize = sizeLarge; }); $("#sizeHugeBtn").click(function(e){ curSize = sizeHuge; }); //choose a tool $("#toolCrayonBtn").click(function(e){ curTool = toolCrayon; }); $("#toolMarkerBtn").click(function(e){ curTool = toolMarker; }); $("#toolEraserBtn").click(function(e){ curTool = toolEraser; }); }); </script> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> clear the canvas:<input id ="clearBtn" type="button" value="clear"> <br> choose a color: <input id ="colorPurpleBtn" type="button" value="Purple"> <input id ="colorGreenBtn" type="button" value="Green"> <input id ="colorYellowBtn" type="button" value="Yellow"> <input id ="colorBrownBtn" type="button" value="Brown"> <br> choose a size: <input id ="sizeSmallBtn" type="button" value="Small"> <input id ="sizeNormalBtn" type="button" value="Normal"> <input id ="sizeLargeBtn" type="button" value="Large"> <input id ="sizeHugeBtn" type="button" value="Huge"> <br> choose a tool: <input id ="toolCrayonBtn" type="button" value="Crayon"> <input id ="toolMarkerBtn" type="button" value="Marker"> <input id ="toolEraserBtn" type="button" value="Eraser"> <br> <canvas id="coloringBook" width="500" height="400" style="border: 1px solid grey"> </canvas> </body> </html>