I. Introduction
Canvas is a new tag of html5, which is a new feature of h5. It is also a graphic container. Simply put, it is a canvas on which you can draw rectangles, circles, polylines, etc. It is controlled by javascript, that is The script draws the graph.
2. Realize the effect
Today's small canvas case mainly has four functions
1. Draw a line 2. Rectangle 3. Circle 4. You can change the thickness of the brush 5. Clear the drawing board
3. Code implementation
1.html+css part code
<style>
canvas{
background-color: #ccc;
border: 1px solid;
}
div{
position:absolute;
/* left: 300px; */
left: 300px;
}
</style>
</head>
<body>
<!--
1. 画线
2. 矩形
3. 圆形
4. 可以改变画笔的粗细
-->
<canvas width="800" height="800"></canvas>
<div>
<button>线条</button>
<button>矩形</button>
<button>圆形</button>
<button>加粗</button>
<button>变细</button>
<button>清除</button>
</div>2. js code
<script>
var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
var btn = document.getElementsByTagName('button');
var chu = 1;
console.log(btn);
//线条
btn[0].onclick = function(){
// console.log(111);
canvas.onmousedown = function(e){
// console.log(chu);
ctx.beginPath();
if(chu<1){
chu=1;
}
ctx.lineWidth = chu;
//获取线的起点
ctx.moveTo(e.offsetX,e.offsetY)
canvas.onmousemove =function(e){
//获取线的终点
ctx.lineTo(e.offsetX,e.offsetY);
//填充颜色
ctx.stroke();
// ctx.closePath();
}
}
}
//矩形
btn[1].onclick = function(){
canvas.onmousedown = function(e){
// ctx.beginPath();
var startX = e.offsetX;
var startY =e.offsetY;
canvas.onmouseup =function(e){
ctx.beginPath();
ctx.lineWidth = chu;
if(chu<1){
chu=1;
}
ctx.rect(startX,startY,e.offsetX-startX,e.offsetY-startY)
ctx.stroke();
ctx.closePath();
}
}
}
// 圆形
btn[2].onclick = function(){
canvas.onmousedown = function(e){
ctx.beginPath();
var startX = e.offsetX;
var startY =e.offsetY;
canvas.onmouseup =function(e){
// ctx.beginPath();
ctx.lineWidth = chu;
if(chu<1){
chu=1;
}
ctx.arc(startX,startY,e.offsetX-startX,0,Math.PI*2)
ctx.stroke();
ctx.closePath();
}
// pan.closePath();
}
}
//取消canva鼠标移动事件鼠标松开取消移动监听
document.body.onmouseup = function(){
canvas.onmousemove =null;
canvas.onmouseup=null;
}
//清除
btn[5].onclick = function(){
ctx.clearRect(0, 0, 800, 800);
}
//粗
btn[3].onclick = function(){
chu+=2;
}
//细
btn[4].onclick = function(){
chu-=2;
}
</script>Four. Summary
Canvas is a very powerful function, and this is just the tip of the iceberg, I hope you can be inspired by it. This is recorded for the convenience of future use, and I hope that the big guys can communicate more, leave a lot of messages, and point out my shortcomings! Friends in need can do research! !