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 canvas
ctx.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."
);
}
});
}
|
2777
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
