H5《canvas》标签实现绘画板
先上结果图：
注：本项目主要实现了：a、画图；b、清屏；c、橡皮擦；d、保存；e、颜色选择；f、粗细选择；
1.html代码
<div class="canvas"> <canvas width="800px" height="500px"></canvas> </div> <div class="btn_box"> <button class="brush" >画笔</button> <button class="clear" >清屏</button> <button class="erase" >橡皮檫</button> <button class="save">保存</button> <span>颜色：</span><input type="color" class="color" /> <span>粗细:</span><input type="range" class="range" min="1" max="20" value="1" /> </div>
2.样式代码
<style>
*{margin: 0;padding: 0;}
body{
display: flex;
justify-content: center;
align-items: center;
width: 100vh;
height: 100vh;
}
.canvas{
width: 800px;
height: 500px;
border: 1px solid #000 ;
border-radius: 20px;
box-shadow: 5px 5px 5px #000;
position: absolute;
left: 50%;
top: 50%;
margin-left: -400px;
margin-top: -300px;
}
.btn_box{
text-align: center;
margin: auto;
position: absolute;
height: 100px;
left: 50%;
top: 50%;
margin-left: -400px;
margin-top: 250px;
}
.btn_box button{
border: none;
width: 80px;
height: 40px;
border: 1px solid gray;
border-radius: 20px;
margin-left: 25px;
}
</style>
3.js代码
<script>
window.onload=function(){
//得到canvas
var mycanvas =document.querySelector("canvas");
var ctx=mycanvas.getContext("2d");
//按钮
brush=document.querySelector(".brush");//画笔
rects=document.querySelector(".rect");//矩形
clear=document.querySelector(".clear");//清屏
erase=document.querySelector(".erase");//橡皮檫
retrue=document.querySelector(".retrue");//撤销
save=document.querySelector(".save");//保存
color=document.querySelector(".color");//颜色选择
ranges=document.querySelector(".range");//粗细
//初始化绘制大小颜色等
var lineW=1,
strokeC="#000000",
fillC="#000000";
//监听颜色修改与画笔大小修改
//修改画笔大小
ranges.onchange=function(){
lineW=this.value;
}
//修改颜色
color.onchange=function(){
strokeC=this.value;
fillC=this.value;
}
//画笔(实质改变颜色)
brush.onclick=function(){
strokeC=color.value;
}
//保存
save.onclick = function() {
let url = mycanvas.toDataURL('image/jpg');
let a = document.createElement('a');//创建一个a标签
document.body.appendChild(a);
a.href = url;
a.download = '草稿纸';//download 属性规定被下载的超链接目标。
a.target = '_blank';
a.click()
};
//定义判断鼠标是否按下事件
var flag=false;
//监听canva鼠标按下事件
var startX=0,startY=0,endX=0,endY=0;
mycanvas.onmousedown=function(e){
//得到绘制开始的坐标
startX=e.layerX;
startY=e.layerY;
//设置鼠标已经按下
flag=true;
}
//监听鼠标按下移动
mycanvas.onmousemove=function(e){
if(flag){
//得到移动的坐标
endX=e.layerX;
endY=e.layerY;
//创建路径
ctx.beginPath();
//绘制图形
ctx.moveTo(startX,startY);
ctx.lineTo(endX,endY);
//设置线条大小与颜色
ctx.strokeStyle=strokeC;
ctx.lineWidth=lineW;
//设置线两端形状round-圆形线帽，square-正方形线帽。
ctx.lineCap="round";
ctx.stroke();
//关闭路径
ctx.closePath();
//下一次的开始位置为上一次的结束坐标
startX=endX;
startY=endY;
}
}
//监听鼠标松开
mycanvas.onmouseup=function(){
flag=false;
}
//离开当前区域
mycanvas.onmouseleave=function(){
flag=false;
}
//清空画布
clear.onclick=function(){
ctx.clearRect(0,0,800,500);
}
//橡皮擦(实质改变颜色)
erase.onclick=function(){
strokeC="#ffffff";
}
}
</script>
4.整体代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绘画本</title>
<style>
*{margin: 0;padding: 0;}
body{
display: flex;
justify-content: center;
align-items: center;
width: 100vh;
height: 100vh;
}
.canvas{
width: 800px;
height: 500px;
border: 1px solid #000 ;
border-radius: 20px;
box-shadow: 5px 5px 5px #000;
position: absolute;
left: 50%;
top: 50%;
margin-left: -400px;
margin-top: -300px;
}
.btn_box{
text-align: center;
margin: auto;
position: absolute;
height: 100px;
left: 50%;
top: 50%;
margin-left: -400px;
margin-top: 250px;
}
.btn_box button{
border: none;
width: 80px;
height: 40px;
border: 1px solid gray;
border-radius: 20px;
margin-left: 25px;
}
</style>
</head>
<body>
<div class="canvas">
<canvas width="800px" height="500px"></canvas>
</div>
<div class="btn_box">
<button class="brush" >画笔</button>
<button class="clear" >清屏</button>
<button class="erase" >橡皮檫</button>
<button class="save">保存</button>
<span>颜色：</span><input type="color" class="color" />
<span>粗细:</span><input type="range" class="range" min="1" max="20" value="1" />
</div>
</body>
</html>
<script>
window.onload=function(){
//得到canvas
var mycanvas =document.querySelector("canvas");
var ctx=mycanvas.getContext("2d");
//按钮
brush=document.querySelector(".brush");//画笔
rects=document.querySelector(".rect");//矩形
clear=document.querySelector(".clear");//清屏
erase=document.querySelector(".erase");//橡皮檫
retrue=document.querySelector(".retrue");//撤销
save=document.querySelector(".save");//保存
color=document.querySelector(".color");//颜色选择
ranges=document.querySelector(".range");//粗细
//初始化绘制大小颜色等
var lineW=1,
strokeC="#000000",
fillC="#000000";
//监听颜色修改与画笔大小修改
//修改画笔大小
ranges.onchange=function(){
lineW=this.value;
}
//修改颜色
color.onchange=function(){
strokeC=this.value;
fillC=this.value;
}
//画笔(实质改变颜色)
brush.onclick=function(){
strokeC=color.value;
}
//保存
save.onclick = function() {
let url = mycanvas.toDataURL('image/jpg');
let a = document.createElement('a');//创建一个a标签
document.body.appendChild(a);
a.href = url;
a.download = '草稿纸';//download 属性规定被下载的超链接目标。
a.target = '_blank';
a.click()
};
//定义判断鼠标是否按下事件
var flag=false;
//监听canva鼠标按下事件
var startX=0,startY=0,endX=0,endY=0;
mycanvas.onmousedown=function(e){
//得到绘制开始的坐标
startX=e.layerX;
startY=e.layerY;
//设置鼠标已经按下
flag=true;
}
//监听鼠标按下移动
mycanvas.onmousemove=function(e){
if(flag){
//得到移动的坐标
endX=e.layerX;
endY=e.layerY;
//创建路径
ctx.beginPath();
//绘制图形
ctx.moveTo(startX,startY);
ctx.lineTo(endX,endY);
//设置线条大小与颜色
ctx.strokeStyle=strokeC;
ctx.lineWidth=lineW;
//设置线两端形状round-圆形线帽，square-正方形线帽。
ctx.lineCap="round";
ctx.stroke();
//关闭路径
ctx.closePath();
//下一次的开始位置为上一次的结束坐标
startX=endX;
startY=endY;
}
}
//监听鼠标松开
mycanvas.onmouseup=function(){
flag=false;
}
//离开当前区域
mycanvas.onmouseleave=function(){
flag=false;
}
//清空画布
clear.onclick=function(){
ctx.clearRect(0,0,800,500);
}
//橡皮擦(实质改变颜色)
erase.onclick=function(){
strokeC="#ffffff";
}
}
</script>
5.其它
如果需要实现其它效果详情见canvas的具体API及属性 https://www.runoob.com/tags/ref-canvas.html
浙公网安备 33010602011771号