html5 canvas drawing board

最新推荐文章于 2019-05-09 15:19:33 发布

never_say_bye

最新推荐文章于 2019-05-09 15:19:33 发布

阅读量485

点赞数

CC 4.0 BY-SA版权

分类专栏： html5 文章标签： html5 canvas

本文链接：https://blog.youkuaiyun.com/never_say_bye/article/details/78156536

html5 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用HTML5 Canvas元素实现的简单绘图应用。该应用通过JavaScript实现了鼠标绘制线条的功能，并使用了jQuery简化DOM操作。具体实现包括设置画布尺寸、监听鼠标事件以及绘制并填充线条。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//index.html

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>HTML5</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link type="text/css" rel="stylesheet" href="css/index.css" />
</head>
<body>
<canvas id="picture">Your browser does not support it</canvas>
</body>
</html>

——————————————————————————————————————————

//index.css

#picture{
   width:500px;
   height:300px;
   border:1px solid #333;
}

________________________________________________________________________

//index.js

$(function(){
   var ctest=$('#picture').get(0);
   var pic=ctest.getContext("2d");
       ctest.width=500;
       ctest.height=300;
       pic.lineWidth=5;
       pic.strokeStyle='rgba(255,0,0,0.5)';
   var pn=false;
   $('#picture').mousedown(function(e){
       var mouseX=e.pageX-this.offsetLeft;
       var mouseY=e.pageY-this.offsetTop;
       pn=true;
       pic.moveTo(mouseX,mouseY);
   });
   $(document).mouseup(function(e){
       pn=false;
   });
   $('#picture').mousemove(function(e){
       var mouseX=e.pageX-this.offsetLeft;
       var mouseY=e.pageY-this.offsetTop;
       if(pn){
           pic.lineTo(mouseX,mouseY);
           pic.stroke();
       };
   });


});