html5教程制作简单画板代码分享

HTML5制作简单画板

@H_777_5@复制代码代码如下:
!DOCTYPE HTML>
html lang="en-US">
head>
tITle> /title>
meta charset="UTF-8">
script src="a href="http://ajax.GOOGLEapis.COM/ajax/libs/jquery/1.7.1/jquery.min.js"> /script"> http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> /script/a> >
/head>
style>
canvas{ border:2px solid #000; }
/style>
body>
canvas id="draw" width="500" height="500"> /canvas>
script type="text/javascript">
$(document).ready(function(){
VAR canvas=document.getElementById("draw");
var draw=canvas.getContext("2d");
draw.lineWidth=5; //线条粗细
draw.strokeStyle="red"; //颜色
var godraw=false;

//按下鼠标
$("#draw").mousedown(function(e){
//准确坐标
var mouseX=e.pageX-this.offsetLeft;
var mouseY=e.pageY-this.offsetTop;
draw.moveTo(mouseX,mouseY);
godraw=true; /p> p> } )
//放开鼠标
$("#draw").mouseup(function(e){
godraw=false;
} )
//移动鼠标
$("#draw").mouSEMove(function(e){
if(godraw){
var mouseX=e.pageX-this.offsetLeft;
var mouseY=e.pageY-this.offsetTop;
draw.lineto(mouseX+4,mouseY+4);
draw.stroke();
} /p> p> } )

} )
/script>
/body>
/html>


效果图

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！