canvas画图小例子

最新推荐文章于 2024-04-20 16:29:18 发布

笨笨的码农

最新推荐文章于 2024-04-20 16:29:18 发布

阅读量1.1k

点赞数

分类专栏： HTML CSS JS

本文链接：https://blog.csdn.net/luthreestone/article/details/74012542

版权

HTML CSS JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<title>画图</title>
<meta charset="utf-8">
</head>
<body>
<div id="con" style="width:500px;height:450px;border:1px solid red;text-align: center;">
<canvas id="can" width="500" height="400" style="border:1px solid black;background-color: white;">
你的浏览器不支持canvas！
</canvas>
<p>
<input id="start" type="button" value="开始绘图">
线宽：<select id="sel" value="1">
<option>1</option>
<option>2</option>
<option>4</option>
<option>6</option>
</select>
颜色<input id="col" type="color" />
<input id="clear" type="button" value="清除">
<input id="eraser" type="button" value="橡皮擦">
</p>
</div>
</body>
</body>
<script>
var ca=document.getElementById("can");
var ctx=ca.getContext("2d");
var bodyWidth=document.body.clientWidth;
var px;var py;
var f=false;
ca.οnmοusedοwn=function(e){
px=e.clientX;
py=e.clientY;
f=true;
if(!ef){
ca.style.cursor="default";
}
else{
ca.style.cursor="pointer";
}
}
var lx=0;
var ly=0;
var w=10;
ca.οnmοusemοve=function(e){
if(f){
var x=e.clientX;
var y=e.clientY;
ctx.beginPath();
ctx.lineWidth=value;
ctx.strokeStyle=color;
ctx.moveTo(px,py);
ctx.lineTo(x,y);
ctx.stroke();
px=x;py=y;
}
if(ef){
ctx.clearRect(lx-w-2,ly-w-2,2*w+5,2*w+5);
lx=e.clientX;
ly=e.clientY;
ctx.lineWidth=1;
ctx.strokeStyle="#000";
ctx.beginPath();
ctx.rect(lx-w,ly-w,2*w,2*w);
ctx.stroke();
}
}
ca.οnmοuseup=function(e){
f=false;
}
//ca.οnmοuseοut=function(e){
//f=false;
//}
var se=document.getElementById("sel");//Ïß¿í
var value=se.value;
var co=document.getElementById("col");//ÑÕÉ«
var color=co.value;
se.οnchange=function(){
value=this.value;
}
co.οnchange=function(){
color=this.value;
}
var cl=document.getElementById('clear');//Çå¿Õ
cl.οnclick=function(){
ctx.clearRect(0,0,ca.width,ca.height);
}
var er=document.getElementById('eraser');//ÏðÆ¤²Á
var ef=false;
er.οnclick=function(){
ef=true;
f=false;
ca.style.cursor="pointer";
}
var st=document.getElementById('start');//Çå¿Õ
st.οnclick=function(){
ctx.clearRect(lx-w-2,ly-w-2,2*w+5,2*w+5);
ef=false;
ca.style.cursor="default";
}
document.οnkeydοwn=function keyDown(e){
if(e.keyCode==221){//]
if(w<25){
w+=2;
}
ctx.clearRect(lx-w-2,ly-w-2,2*w+5,2*w+5);
ctx.beginPath();
ctx.lineWidth=1;
ctx.strokeStyle="#000";
ctx.rect(lx-w,ly-w,2*w,2*w);
ctx.stroke();
}
else if(e.keyCode==219){//[
ctx.clearRect(lx-w-2,ly-w-2,2*w+5,2*w+5);
if(w>5){
w-=2;
}
ctx.beginPath();
ctx.lineWidth=1;
ctx.strokeStyle="#000";
ctx.rect(lx-w,ly-w,2*w,2*w);
ctx.stroke();
}
}
</script>
</html>

笨笨的码农

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas画图小例子

<!DOCTYPE html><html lang="en"><head><title>画图</title><meta charset="utf-8"></head><body><div id="con" style="width:500px;height:450px;border:...
复制链接

扫一扫