html5 画图板

8个最新炫酷的HTML5动画应用

http://www.php100.com/html/it/qianduan/2015/0107/8281.html

html5-canvas-web-draw

 

另外一个画板demo

http://www.oschina.net/code/snippet_221942_46198

<!DOCTYPE html>
<html>
<head>
<title>h5 demo</title>
</head>
<body>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body oncontextmenu="return false;" onselectstart="return false;">
<canvas id='canvas' style="border:2px solid blue;margin:2px"></canvas>
<div>
<button id='c'>clear</button>
</div>
<script>
var canvas = document.getElementById('canvas');
canvas.addEventListener('mousemove', onMouseMove, false);
canvas.addEventListener('mousedown', onMouseDown, false);
canvas.addEventListener('mouseup', onMouseUp, false);
 
canvas.addEventListener('touchstart',onMouseDown,false);
canvas.addEventListener('touchmove',onMouseMove,false);
canvas.addEventListener('touchend',onMouseUp,false)
 
 
canvas.height = 300;
canvas.width = getWidth() - 50;
var ctx = canvas.getContext('2d');
 
ctx.lineWidth = 3.0; // 设置线宽
ctx.strokeStyle = "#CC0000"; // 设置线的颜色
 
var flag = false;
function onMouseMove(evt)
{
evt.preventDefault();
if (flag)
{
var p = pos(evt);
ctx.lineTo(p.x, p.y);
ctx.lineWidth = 6.0; // 设置线宽
ctx.shadowColor = "#CC0000";
ctx.shadowBlur = 1;
//ctx.shadowOffsetX = 6;
ctx.stroke();
}
}
 
function onMouseDown(evt)
{
evt.preventDefault();
ctx.beginPath();
var p = pos(evt);
ctx.moveTo(p.x, p.y);
flag = true;
}
 
 
function onMouseUp(evt)
{
evt.preventDefault();
flag = false;
}
 
 
var clear = document.getElementById('c');
clear.addEventListener('click',function()
{
ctx.clearRect(0, 0, canvas.width, canvas.height);
},false);
 
 
function pos(event)
{
var x,y;
if(isTouch(event)){
x = event.touches[0].pageX;
y = event.touches[0].pageY;
}else{
x = event.layerX;
y = event.layerY;
}
return {x:x,y:y};
}
 
function isTouch(event)
{
var type = event.type;
if(type.indexOf('touch')>=0){
return true;
}else{
return false;
}
}
 
function getWidth()
{
var xWidth = null;
 
if (window.innerWidth !== null) {
xWidth = window.innerWidth;
} else {
xWidth = document.body.clientWidth;
}
 
return xWidth;
}
</script>
</body>
</html>
html5 画板 demo

 

posted @ 2015-01-09 09:49  高山-景行  阅读(229)  评论(0)  编辑  收藏  举报