您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要介绍了HTML5如何制作简单画板，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
代码如下:
<!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>
感谢你能够认真阅读完这篇文章，希望小编分享的“HTML5如何制作简单画板”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。