全国 [ 切换城市 ]
咨询热线 : 400-969-7660
首页 > IT知识库 > IT教程 >

IT教程

用HTML5 Canvas实现简易画板-兼容PC和移动

来源: 优逸客小编 浏览量: 日期: 2018-12-04

  本次分享是优逸客的学生,用html5画出的一个小兔子,原来代码也可以这么可爱

效果:
 
 
代码:
 
<!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 #000;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 = 500;
canvas.width = getWidth() - 25;
var ctx = canvas.getContext('2d');
 
ctx.lineWidth = 3.0; // 设置线宽
ctx.strokeStyle = "#fc1741"; // 设置线的颜色
 
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 = "#fc1741";
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>
 
 
今天分享就到这里,关于web全栈课程以及知识更多的分享,请期待下期哦
 
 
 
 
分享:
上一篇: 第一页