canvas简易画板

最新推荐文章于 2023-04-04 18:35:31 发布

两棵黄鹂鸣翠柳

最新推荐文章于 2023-04-04 18:35:31 发布

阅读量261

点赞数

分类专栏： case

本文链接：https://blog.csdn.net/h13783313210/article/details/78924336

版权

case 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

画板案例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
#can{
border: 1px solid gray;
margin-top: 100px;
margin-left: 400px;
cursor:url("img/pen32.ico"),auto;
}
</style>
</head>
<body>
<canvas id="can" height="600" width="600">
你的浏览器不支持canvas
</canvas>
<script>
var can = document.getElementById('can');
var ctx = can.getContext("2d");
var flag = false;

ctx.lineWidth="20";
ctx.lineCap="round";
ctx.lineJoin="round";
var color="red";

can.onmousedown = function(e){
ctx.beginPath();
flag = true;
ctx.strokeStyle="black";
ctx.moveTo(e.clientX-400,e.clientY-100);
console.log(e.clientX)
}
can.οnmοusemοve=function(e){
console.log(111)
if(flag){

ctx.lineTo(e.clientX-400,e.clientY-100);
ctx.stroke()
}
}
can.οnmοuseup=function(){
flag=false;
}
can.οnmοuseοut=function(){
flag=false;
}
</script>
</body>
</html>