正文
html5 画图板
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
8个最新炫酷的HTML5动画应用
http://www.php100.com/html/it/qianduan/2015/0107/8281.html
另外一个画板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 = ;
canvas.width = getWidth() - ;
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 = ;
//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(, , canvas.width, canvas.height);
},false); function pos(event)
{
var x,y;
if(isTouch(event)){
x = event.touches[].pageX;
y = event.touches[].pageY;
}else{
x = event.layerX;
y = event.layerY;
}
return {x:x,y:y};
} function isTouch(event)
{
var type = event.type;
if(type.indexOf('touch')>=){
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
