html5 canvas 使用示例

前端技术 2023/09/08 HTML

复制代码
代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset=\"UTF-8\">
<title>HTML5示例</title>
<style type=\"text/css\">
#container{border:1px solid #ccc;width:800px;height:600px;position:relative;}
canvas{position:absolute;top:0px;left:0px;z-index:1;}
</style>
</head>
<body>
<select id=\"tools\">
<option value=\"pen\">铅笔</option>
<option value=\"line\">直线</option>
<option value=\"rect\">矩形</option>
<option value=\"circle\">圆形</option>
<option value=\"ellipse\">椭圆</option>
</select>
<div id=\"container\">
<canvas id=\"canvas\" width=\"800\" height=\"600\"></canvas>
<canvas id=\"canvas_temp\" style=\"z-index:2;\" width=\"800\" height=\"600\"></canvas>
</div>
<script type=\"text/javascript\">
var canvas = document.getElementById(\'canvas\');
var context = canvas.getContext(\'2d\');

var _canvas = document.getElementById(\'canvas_temp\');
var _context = _canvas.getContext(\'2d\');
var tools= document.getElementById(\'tools\');

tools.onchange = function (e){
tool[this.value]();
};
var tool = {
pen:function (){
this.reset();
_canvas.onmousedown=function (e){
_context.moveTo(e.layerX,e.layerY);
_canvas.onmousemove=function (e){
_context.lineTo(e.layerX,e.layerY);
_context.stroke();
};
_canvas.onmouseup=function (e){
_canvas.onmousemove=null;
_canvas.onmouseup=null;
tool.updata();
};
};
},
line:function (){
this.reset();
_canvas.onmousedown=function (e){
var _e = e;
_canvas.onmousemove=function (e){
_context.clearRect(0,0,canvas.width,canvas.height);
_context.beginPath();
_context.moveTo(_e.layerX,_e.layerY);
_context.lineTo(e.layerX,e.layerY);
_context.stroke();
_context.closePath();
};
_canvas.onmouseup=function (e){
_canvas.onmousemove=null;
_canvas.onmouseup=null;
tool.updata();
};
}
},
rect:function (){
this.reset();
_canvas.onmousedown=function (e){
var _e = e;
_context.strokeStyle=\"#000\";
_canvas.onmousemove=function (e){
_context.clearRect(0,0,canvas.width,canvas.height);
_context.strokeRect(_e.layerX,_e.layerY,e.layerX-_e.layerX,e.layerY-_e.layerY);
};
_canvas.onmouseup=function (e){
_canvas.onmousemove=null;
_canvas.onmouseup=null;
tool.updata();
};
}
},
circle:function (){
this.reset();
_canvas.onmousedown=function (e){
var _e = e;
_canvas.onmousemove=function (e){
_context.clearRect(0,0,canvas.width,canvas.height);
_context.beginPath();
_context.arc(_e.layerX,_e.layerY,e.layerX-_e.layerX,0,Math.PI*2,true);
_context.stroke();
_context.closePath();
};
_canvas.onmouseup=function (e){
_canvas.onmousemove=null;
_canvas.onmouseup=null;
tool.updata();
};
}
},
ellipse:function (){
this.reset();
_canvas.onmousedown=function (e){
var _e = e;
_canvas.onmousemove=function (e){
var st=0;
_context.clearRect(0,0,canvas.width,canvas.height);
_context.beginPath();
_context.moveTo(_e.layerX+(e.layerX-_e.layerX)*Math.cos(st), _e.layerY+(e.layerX-_e.layerX)*Math.sin(st));
st+=1/180*Math.PI;
for(var i=0;i<360;i++){
_context.lineTo(_e.layerX+(e.layerX-_e.layerX)*Math.cos(st),_e.layerY+(e.layerY-_e.layerY)*Math.sin(st));
st+=1/180*Math.PI;
}
_context.stroke();
_context.closePath();
};
_canvas.onmouseup=function (e){
_canvas.onmousemove=null;
_canvas.onmouseup=null;
tool.updata();
};
}
},
reset:function (){
_canvas.onmousedown=null;
_canvas.onmouseup=null;
_canvas.onmousemove=null;
},
updata:function (){
context.drawImage(_canvas, 0, 0);
_context.clearRect(0, 0, canvas.width, canvas.height);
}
};
tool[\'pen\']();
</script>
</body>
</html>

本文地址：https://www.stayed.cn/item/21763

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案