您的位置：首页 > 其它

使用canvas制作在线画板

2015-07-27 22:50 645 查看

canvas绘图的强大功能，让人前仆后继的去研究它。代码全部加起来不足百行。还用到了h5中的<input type="color"/>和<input type="range"/>

使得页面更加简洁。

本文只用了鼠标的三个事件 onmousedown onmousemove onmouseup就轻松实现了网页画板的制作。

上代码：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#canvas{
border: 1px solid #333;
display: block;
margin:20px auto;
}
#color{
width:100px;
height:32px;
position:absolute;
right:115px;
top:200px;
}
#range{
width:100px;
height:32px;
position:absolute;
right:115px;
top:125px;
}
#demo{
background:black;
width:100px;
height:5px;
position:absolute;
right:115px;
top:100px;
}
</style>
</head>
<body background-color="rgba(0,0,0,0.5)">
<div class="box">
<h3 align="center">CANVAS制作简单在线画板</h3>
<canvas id="canvas" width="800" height="600"></canvas>
<input type="color" id="color"/>
<div id="demo"></div>
<input type="range" id="range" min="1" max="10"/>
</div>
<script type="text/javascript">
var canvas=document.getElementById("canvas");
var cxt=canvas.getContext("2d");
var color=document.getElementById("color");
var size=document.getElementById("range");
var demo=document.getElementById("demo");
//根据size的变化来使得size上面的线条演示画笔粗细。
size.onchange=function(){
demo.style.height=size.value+"px";
}
//使得color的颜色与演示线条的颜色一致
color.onchange=function(){
demo.style.background=color.value;
}
var flag=false;
//鼠标按下
canvas.onmousedown= function (e) {
var mouseX= e.pageX-this.offsetLeft;
var mouseY= e.pageY-this.offsetTop;
flag=true;
cxt.beginPath();
cxt.lineWidth=size.value;
cxt.strokeStyle=color.value;
cxt.moveTo(mouseX,mouseY);
};
//鼠标移动
canvas.onmousemove= function (e) {
var mouseX= e.pageX-this.offsetLeft;
var mouseY= e.pageY-this.offsetTop;
if(flag){

cxt.lineTo(mouseX,mouseY);
cxt.stroke();
}
}
//鼠标松开
canvas.onmouseup= function (e) {
flag=false;
}
</script>
</body>
</html>

大家做成后的木模样

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航