简易画板js

最新推荐文章于 2024-05-10 09:50:54 发布

jingtian678

最新推荐文章于 2024-05-10 09:50:54 发布

阅读量903

点赞数 1

分类专栏： web大前端

本文链接：https://blog.csdn.net/jingtian678/article/details/71550569

版权

web大前端专栏收录该内容

291 篇文章 9 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>简易画板</title>
<style>
*{margin: 0;padding: 0;}
#box
{
height:400px;
width:700px;
margin:100px auto;
background: white;
border: 2px solid yellow;
}
canvas
{
background: white;
}
</style>
</head>
<body>
<div id="box">
<canvas height="400" width="700" id="canvas"></canvas>
</div>
<input type="button" value="清空画布" id="btn" />
<script>
//想彻底实现得奖功能需要后端给给数据，前端通过ajax进行请求
var oBox=document.getElementById('box');
var can=document.getElementById('canvas');
var oBtn=document.getElementById('btn');
//需要图片加载完成再进行，图片加载是需要时间的，此点极为重要
window.οnlοad=function()
{
can.style.position='absolute';
can.style.left=oBox.offsetLeft+2+'px';
can.style.top=oBox.offsetTop+2+'px';
//绘制图片
var cxt=can.getContext('2d');
//cxt.drawImage(img,0,0);//绘制图片(坐标)左上角
can.οnmοusedοwn=function(ev)
{
var ev=ev||event;
var x=ev.clientX-can.offsetLeft;
var y=ev.clientY-can.offsetTop;
cxt.beginPath();//开始路径
cxt.arc(x,y,2,0,Math.PI*2,false);
cxt.fill();
//画圆是不可以的，画出来全是bug
can.οnmοusemοve=function(ev)
{
var ev=ev||event;
var x1=ev.clientX-can.offsetLeft;
var y1=ev.clientY-can.offsetTop;
cxt.beginPath();//开始路径
cxt.lineWidth=4;
cxt.lineCap='round';//交叉点圆角

//设置合成属性，让先后绘制的图像重复部分什么都不显示
cxt.moveTo(x,y);
cxt.lineTo(x1,y1);
cxt.stroke();//触笔方法，绘制线条
x=x1;
y=y1;
/*同源问题即浏览器安全策略不同，谷歌浏览器要求所有来源都要来自同一域名，而谷歌
浏览器不要求这些，可以通过使用本地服务器来解决*/
};
can.οnmοuseup=function()
{
this.οnmοusemοve=null;
this.οnmοuseup=null;
};
};
};
oBtn.οnclick=function()
{
location.reload();//重新加载当前页面
}
</script>
</body>
</html>

jingtian678

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简易画板js

简易画板*{margin: 0;padding: 0;}#box{height:400px;width:700px;margin:100px auto;background: white;border: 2px solid yellow;}canvas{background: white;}//想彻底实现得
复制链接

扫一扫

专栏目录