一、前言
canvas是html5的一个新标签，属于h5的新特性，也是一个图形的容器，简单点说就是一块画布，你可以在上画矩形，圆形，折线等等，它是通过javascript来操控的，即脚本绘制图形。
二、实现效果
今天这个canvas小案例主要是四个功能
1. 画线 2. 矩形 3. 圆 4. 可以改变画笔的粗细 5.清除画板
三、代码实现
1.html+css部分代码
<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代码
<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>四、总结
canvas是一个非常强大的功能，我这也只是它的冰山一角，希望你们看到能有所启发。这个记录下来为了方便以后使用的方便，也希望大佬们多多交流，多多留言，指出我的不足的之处啦！有需要的小伙伴可以研究研究啦！！