HTML Canvas 涂鸦

HTML Canvas 涂鸦一

<!doctype html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>javascript结合html5 canvas实现的涂鸦板 - 分享JavaScript-sharejs.com</title><meta name="Copyright" content="JavaScript分享网 http://www.sharejs.com/" /><meta name="description" content="javascript结合html5 canvas实现的涂鸦板,JavaScript分享网，js脚本，网页特效，网页模板，png图标，矢量图下载" /><meta content="JavaScript,分享,JavaScript代码,Ajax,jQuery,网页模板,PNG图标，矢量图" name="keywords" />
</head><body><style>* {margin: 0;padding: 0;}.fa {width: 740px;margin: 0 auto;}.top {margin: 20px 0;}.top input {width: 25px;height: 25px;border: 1px solid #fff;border-radius: 4px;background: #ddd;}.top .i1 {background: #000000;}.top .i2 {background: #FF0000;}.top .i3 {background: #80FF00;}.top .i4 {background: #00FFFF;}.top .i5 {background: #808080;}.top .i6 {background: #FF8000;}.top .i7 {background: #408080;}.top .i8 {background: #8000FF;}.top .i9 {background: #CCCC00;}#canvas {background: #eee;cursor: default;}.font input {font-size: 14px;}.top .grea {background: #aaa;}</style></head><body><div class="fa"><div class="top"><div id="color">请选择画笔颜色：<input class="i1" type="button" value="" /><input class="i2" type="button" value="" /><input class="i3" type="button" value="" /><input class="i4" type="button" value="" /><input class="i5" type="button" value="" /><input class="i6" type="button" value="" /><input class="i7" type="button" value="" /><input class="i8" type="button" value="" /><input class="i9" type="button" value="" /></div><div class="font" id="font">请选择画笔的宽度：<input type="button" value="细" /><input type="button" value="中" class="grea" /><input type="button" value="粗" /></div><div><span id="error">如果有错误，请使用橡皮擦：</span><input id="eraser" style="width:60px;font-size:14px;" type="button" value="橡皮擦" /></div><input id="clear" type="button" value="清除画布" style="width:80px;" /><input id="revocation" type="button" value="撤销" style="width:80px;" /><input id="imgurl" type="button" value="导出图片路径" style="width:80px;" /></div><canvas id="canvas" width="740" height="420">您的浏览器不支持 canvas 标签</canvas><div id="div1"></div></div><div id="html"></div><script>(function() {var paint = {init: function() {this.load();},load: function() {this.x = []; //记录鼠标移动是的X坐标this.y = []; //记录鼠标移动是的Y坐标this.clickDrag = [];this.lock = false; //鼠标移动前，判断鼠标是否按下this.isEraser = false;//this.Timer=null;//橡皮擦启动计时器//this.radius=5;this.storageColor = "#000000";this.eraserRadius = 15; //擦除半径值this.color = ["#000000", "#FF0000", "#80FF00", "#00FFFF", "#808080", "#FF8000", "#408080", "#8000FF", "#CCCC00"]; //画笔颜色值this.fontWeight = [2, 5, 8];this.$ = function(id) {return typeof id == "string" ? document.getElementById(id) : id;};this.canvas = this.$("canvas");if (this.canvas.getContext) {} else {alert("您的浏览器不支持 canvas 标签");return;}this.cxt = this.canvas.getContext('2d');this.cxt.lineJoin = "round"; //context.lineJoin - 指定两条线段的连接方式this.cxt.lineWidth = 5; //线条的宽度this.iptClear = this.$("clear");this.revocation = this.$("revocation");this.imgurl = this.$("imgurl"); //图片路径按钮this.w = this.canvas.width; //取画布的宽this.h = this.canvas.height; //取画布的高this.touch = ("createTouch" in document); //判定是否为手持设备this.StartEvent = this.touch ? "touchstart" : "mousedown"; //支持触摸式使用相应的事件替代this.MoveEvent = this.touch ? "touchmove" : "mousemove";this.EndEvent = this.touch ? "touchend" : "mouseup";this.bind();},bind: function() {var t = this;/*清除画布*/this.iptClear.onclick = function() {t.clear();};/*鼠标按下事件，记录鼠标位置，并绘制，解锁lock，打开mousemove事件*/this.canvas['on' + t.StartEvent] = function(e) {var touch = t.touch ? e.touches[0] : e;var _x = touch.clientX - touch.target.offsetLeft; //鼠标在画布上的x坐标，以画布左上角为起点var _y = touch.clientY - touch.target.offsetTop; //鼠标在画布上的y坐标，以画布左上角为起点            if (t.isEraser) {/*t.cxt.globalCompositeOperation = "destination-out";t.cxt.beginPath();t.cxt.arc(_x, _y,t.eraserRadius, 0, Math.PI * 2);t.cxt.strokeStyle = "rgba(250,250,250,0)";t.cxt.fill();t.cxt.globalCompositeOperation = "source-over";*/t.resetEraser(_x, _y, touch);} else {t.movePoint(_x, _y); //记录鼠标位置t.drawPoint(); //绘制路线}t.lock = true;};/*鼠标移动事件*/this.canvas['on' + t.MoveEvent] = function(e) {var touch = t.touch ? e.touches[0] : e;if (t.lock) //t.lock为true则执行{var _x = touch.clientX - touch.target.offsetLeft; //鼠标在画布上的x坐标，以画布左上角为起点var _y = touch.clientY - touch.target.offsetTop; //鼠标在画布上的y坐标，以画布左上角为起点if (t.isEraser) {//if(t.Timer)clearInterval(t.Timer);//t.Timer=setInterval(function(){t.resetEraser(_x, _y, touch);//},10);} else {t.saveDraw();t.movePoint(_x, _y, true); //记录鼠标位置t.drawPoint(); //绘制路线}}};this.canvas['on' + t.EndEvent] = function(e) {/*重置数据*/t.lock = false;t.x = [];t.y = [];t.clickDrag = [];clearInterval(t.Timer);t.Timer = null;};this.revocation.onclick = function() {t.redraw();};this.changeColor();this.imgurl.onclick = function() {t.getUrl();};/*橡皮擦*/this.$("eraser").onclick = function(e) {t.isEraser = true;t.$("error").style.color = "red";t.$("error").innerHTML = "您已使用橡皮擦！";};},movePoint: function(x, y, dragging) {/*将鼠标坐标添加到各自对应的数组里*/this.x.push(x);this.y.push(y);this.clickDrag.push(y);},drawPoint: function(x, y, radius) {for (var i = 0; i < this.x.length; i++) //循环数组{this.cxt.beginPath(); //context.beginPath() , 准备绘制一条路径if (this.clickDrag[i] && i) { //当是拖动而且i!=0时，从上一个点开始画线。this.cxt.moveTo(this.x[i - 1], this.y[i - 1]); //context.moveTo(x, y) , 新开一个路径，并指定路径的起点} else {this.cxt.moveTo(this.x[i] - 1, this.y[i]);}this.cxt.lineTo(this.x[i], this.y[i]); //context.lineTo(x, y) , 将当前点与指定的点用一条笔直的路径连接起来this.cxt.closePath(); //context.closePath() , 如果当前路径是打开的则关闭它this.cxt.stroke(); //context.stroke() , 绘制当前路径}},clear: function() {this.cxt.clearRect(0, 0, this.w, this.h); //清除画布，左上角为起点},redraw: function() {/*撤销*/this.cxt.restore();},preventDefault: function(e) {/*阻止默认*/var touch = this.touch ? e.touches[0] : e;if (this.touch) touch.preventDefault();else window.event.returnValue = false;},changeColor: function() {/*为按钮添加事件*/var t = this,iptNum = this.$("color").getElementsByTagName("input"),fontIptNum = this.$("font").getElementsByTagName("input");for (var i = 0, l = iptNum.length; i < l; i++) {iptNum[i].index = i;iptNum[i].onclick = function() {t.cxt.save();t.cxt.strokeStyle = t.color[this.index];t.storageColor = t.color[this.index];t.$("error").style.color = "#000";t.$("error").innerHTML = "如果有错误，请使用橡皮擦：";t.cxt.strokeStyle = t.storageColor;t.isEraser = false;}}for (var i = 0, l = fontIptNum.length; i < l; i++) {t.cxt.save();fontIptNum[i].index = i;fontIptNum[i].onclick = function() {t.changeBackground(this.index);t.cxt.lineWidth = t.fontWeight[this.index];t.$("error").style.color = "#000";t.$("error").innerHTML = "如果有错误，请使用橡皮擦：";t.isEraser = false;t.cxt.strokeStyle = t.storageColor;}}},changeBackground: function(num) {/*添加画笔粗细的提示背景颜色切换，灰色为当前*/var fontIptNum = this.$("font").getElementsByTagName("input");for (var j = 0, m = fontIptNum.length; j < m; j++) {fontIptNum[j].className = "";if (j == num) fontIptNum[j].className = "grea";}},getUrl: function() {this.$("html").innerHTML = this.canvas.toDataURL();},resetEraser: function(_x, _y, touch) {/*使用橡皮擦-提醒*/var t = this;//this.cxt.lineWidth = 30;/*source-over 默认,相交部分由后绘制图形的填充(颜色,渐变,纹理)覆盖,全部浏览器通过*/t.cxt.globalCompositeOperation = "destination-out";t.cxt.beginPath();t.cxt.arc(_x, _y, t.eraserRadius, 0, Math.PI * 2);t.cxt.strokeStyle = "rgba(250,250,250,0)";t.cxt.fill();t.cxt.globalCompositeOperation = "source-over"}};paint.init();})();</script><div style="clear:both"></div><br><br><div align="center"><script language="javascript" src="http://www.sharejs.com/js/720.js"></script><br><br> 获取更多JavaScript代码，请登录JavaScript分享网 <a href="http://www.sharejs.com">http://www.sharejs.com</a><br> 转载请注明出处，本代码仅供学习交流，不可用于任何商业用途！</div></body></html>

涂鸦二

<div align="center"><canvas id="myCanvas" width="500" height="200" style="border:2px solid #6699cc"></canvas><div class="control-ops"><button type="button" class="btn btn-primary" οnclick="javascript:clearArea();return false;">清空画板</button>Line width : <select id="selWidth"><option value="1">1</option><option value="3">3</option><option value="5">5</option><option value="7">7</option><option value="9" selected="selected">9</option><option value="11">11</option></select>Color : <select id="selColor"><option value="black">black</option><option value="blue" selected="selected">blue</option><option value="red">red</option><option value="green">green</option><option value="yellow">yellow</option><option value="gray">gray</option></select></div>
</div>

var mousePressed = false;
var lastX, lastY;
var ctx;function InitThis() {ctx = document.getElementById('myCanvas').getContext("2d");$('#myCanvas').mousedown(function (e) {mousePressed = true;Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);});$('#myCanvas').mousemove(function (e) {if (mousePressed) {Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);}});$('#myCanvas').mouseup(function (e) {mousePressed = false;});$('#myCanvas').mouseleave(function (e) {mousePressed = false;});
}function Draw(x, y, isDown) {if (isDown) {ctx.beginPath();ctx.strokeStyle = $('#selColor').val();ctx.lineWidth = $('#selWidth').val();ctx.lineJoin = "round";ctx.moveTo(lastX, lastY);ctx.lineTo(x, y);ctx.closePath();ctx.stroke();}lastX = x; lastY = y;
}function clearArea() {// Use the identity matrix while clearing the canvasctx.setTransform(1, 0, 0, 1, 0, 0);ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

上传

我们需要在html页面上创建3个元素：

一个canvas元素，用于绘制图片，实际绘图在js文件中完成。
一个用于触发绘图操作的按钮。
一个用于上传在canvas中绘制好的图片的按钮。

<form id="form1" runat="server">

<div align="center" class="i-canvas">

<canvas id="myCanvas" width="500" height="300"></canvas>

<ul>

<li><button onclick="javascript:DrawPic();return false;">开始画图</button></li>

<li><button onclick="javascript:UploadPic();return false;">上传到服务器</button></li>

</ul>

</div>

</form>

JAVASCRIPT

在js代码中要完成两项工作：在canvas画布中绘制图像和使用ajax来上传图片。我们写两个函数来分别完成这两项工作。一个hisDrawPic()函数，用于绘图。一个是UploadPic()函数，用于上传图片。

function DrawPic() {

// Get the canvas element and its 2d context

var Cnv = document.getElementById('myCanvas');

var Cntx = Cnv.getContext('2d');

// Create gradient

var Grd = Cntx.createRadialGradient(100, 100, 20, 140, 100, 230);

Grd.addColorStop(0, "red");

Grd.addColorStop(1, "black");

// Fill with gradient

Cntx.fillStyle = Grd;

Cntx.fillRect(0, 0, 300, 200);

// Write some text

for (i=1; i<10 ; i++)

{

Cntx.fillStyle = "white";

Cntx.font = "36px Verdana";

Cntx.globalAlpha = (i-1) / 9;

Cntx.fillText("Codicode.com", i * 3 , i * 20);

}

function UploadPic() {

// Generate the image data

var Pic = document.getElementById("myCanvas").toDataURL("image/png");

Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "")

// Sending the image data to Server

$.ajax({

type: 'POST',

url: 'Save_Picture.aspx/UploadPic',

data: '{ "imageData" : "' + Pic + '" }',

contentType: 'application/json; charset=utf-8',

dataType: 'json',

success: function (msg) {

alert("Done, Picture Uploaded.");

}

});

}