canvas绘图
作者：互联网
H5制作的静态页面绘图工具
页面效果
上代码
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
canvas {
font-size: 1px;
margin: 10px;
border: 1px solid salmon;
/* width: 1500px;
height: 600px; */
border-radius: 10px;
}
input[type='button'] {
padding: 0.5em 2em;
font-size: 1.2em;
margin: 0px 10px;
background-color: rgb(214, 214, 214);
border: none;
border-radius: 2em;
color: #fff;
cursor: pointer;
}
input[type='button']:hover {
background-color: rgb(179, 179, 179);
}
#tools svg {
height: 50px;
width: 100px;
}
ul {
list-style: none;
padding: 5px;
margin: 5px;
}
ul li {
cursor: pointer;
float: left;
padding: 0px 5px;
}
li div {
width: 50px;
height: 50px;
background-color: aqua;
border-radius: 10px;
border: rgb(255, 255, 255) 5px solid;
}
.color:nth-child(3) div {
background-color: red;
}
.color:nth-child(4) div {
background-color: blue;
}
.color:nth-child(5) div {
background-color: yellow;
}
.custom div {
background-color: black;
}
li input {
height: 40px;
}
#select {
z-index: 3;
position: absolute;
}
.color div:hover{
border: rgb(238, 255, 164) 5px solid;
}
.lineWidth input{
border: none;
outline: none;
}
.lineWidth{
padding: 2px;
padding-top: 20px;
padding-left: 50px;
}
#lineWidth svg{
width: 20px;
}
#lineWidth input:focus{
background-color: rgb(169, 204, 255);
border-radius: 16px;
}
</style>
</head>
<body>
<input type="button" value="清空" id="clear">
<input type="button" value="获取数据" id="getdata">
<input type="button" value="导出图片" id="getimg">
<input type="hidden" id="img">
<!-- <input type="button" value="切换" id="p" > -->
<div id="tools">
<ul>
<li class="pan"> <svg t="1629424055171" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="3352" width="200" height="200">
<path
d="M751.97 112.3l-1.88-1.16 0.36-0.08c-52.86-32.34-121.88-16.25-155.01 36.09l-55.57 88.15-8.1 12.18L244.18 703.8l-1.28 2.08c-1.16 1.88-1.88 3.95-2.08 6.15L221.9 928.52c-0.28 3.19 0.52 6.31 2.32 8.94 4.27 6.27 12.81 7.86 19.08 3.63l186.55-110.26c2.08-1.2 3.75-2.95 4.95-5.03l1-1.56 287.39-456.3 43.03-68.26 20.2-32.02c32.86-52.49 17.53-121.67-34.45-155.36zM547.94 273.62l60.88 38.4-252.58 400.56c-10.3-24.27-34.57-39.6-60.92-38.44l252.62-400.52z m-296.18 631.1l3.87-45.11 4.71 0.88a51.346 51.346 0 0 1 27.03 17.09c1 1.24 2 2.52 2.91 3.87l-38.52 23.27z m161.56-95.73l-99.24 58.56a78.611 78.611 0 0 0-47.07-33.65c-2.99-0.76-5.99-1.32-9.02-1.72l10.02-114.85a36.064 36.064 0 0 1 22.75-15.53c19.48-4.07 38.6 8.38 42.72 27.9 2 9.3 0.32 18.96-4.67 27.07-0.36 0.48-0.68 1-0.92 1.52-3.31 6.35-0.88 14.21 5.51 17.53 0.28 0.16 0.6 0.36 0.88 0.52 6.47 3.47 14.49 1.04 17.96-5.39a35.454 35.454 0 0 1 22.2-15.53c8.94-2 18.28-0.48 26.19 4.15 17.12 10.14 22.83 32.3 12.69 49.42z m27.35-43.47c-10.42-24.43-34.93-39.72-61.44-38.32l252.58-400.53 61.44 38.32-252.58 400.53z m283.24-449.87l-16.61 26.27-145.03-91.5 30.86-48.9 145.23 91.86-14.45 22.27z m39.32-62.63l-10.46 16.73-145.03-91.38L618 161.92c25.27-39.96 78.05-52.06 118.21-27.07 39.95 25.27 52.05 78.05 27.02 118.17z"
p-id="3353"></path>
<path
d="M290.29 881.45l-38.52 23.27 3.87-45.11 4.71 0.88a51.346 51.346 0 0 1 27.03 17.09c0.99 1.24 1.99 2.51 2.91 3.87z"
fill="#B4B6BC" p-id="3354"></path>
<path
d="M413.19 809.39l-99.55 58.04a78.61 78.61 0 0 0-46.89-33.9c-2.99-0.77-5.98-1.35-9.01-1.76l10.62-114.8a36.02 36.02 0 0 1 22.84-15.41c19.5-3.97 38.56 8.59 42.57 28.13 1.95 9.31 0.22 18.96-4.81 27.04-0.36 0.48-0.68 0.99-0.93 1.51-3.35 6.33-0.95 14.21 5.42 17.55 0.28 0.16 0.6 0.36 0.88 0.52 6.45 3.51 14.49 1.11 17.99-5.29a35.375 35.375 0 0 1 22.28-15.41c8.95-1.95 18.29-0.38 26.17 4.29 17.06 10.23 22.65 32.41 12.42 49.49z"
fill="#FFEA8F" p-id="3355"></path>
<path
d="M693.25 364.99L440.67 765.52c-10.42-24.43-34.93-39.72-61.44-38.32l252.58-400.53 61.44 38.32z"
fill="#ED8D22" p-id="3356"></path>
<path d="M608.82 312.02L356.24 712.58c-10.3-24.27-34.57-39.6-60.92-38.44l252.62-400.53 60.88 38.41z"
fill="#FFEA8F" p-id="3357"></path>
<path d="M738.36 293.38l-14.45 22.27-16.61 26.27-145.03-91.5 30.86-48.9z" fill="#80D8FF"
p-id="3358"></path>
<path
d="M763.23 253.02l-10.46 16.73-145.03-91.38L618 161.92c25.27-39.96 78.05-52.06 118.21-27.07 39.95 25.27 52.05 78.05 27.02 118.17z"
fill="#FD5E7A" p-id="3359"></path>
</svg></li>
<li class="eraser"> <svg t="1629424380341" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="5518" width="200" height="200">
<path
d="M1007.9488 353.6128L753.408 52.224c-24.8832-32.4864-69.6576-37.248-100.0192-10.6496L44.4928 575.2832c-30.3616 26.5984-34.816 74.5216-9.9584 106.9824l244.3008 305.4848c24.8832 32.4864 69.6576 37.248 100.0192 10.6496l619.1104-537.8048c30.4128-26.5984 34.8672-74.496 9.984-106.9824z"
fill="#FBDBBA" p-id="5519"></path>
<path
d="M137.216 491.52s-48.9728 43.1872-92.16 81.92c-9.1392 14.464-22.2464 30.336-24.576 47.104-3.4816 25.216 4.096 49.152 4.096 49.152l22.528 28.672L198.656 563.2l-61.44-71.68zM741.376 38.912c-8.1152-5.5808-27.136-21.0176-47.104-18.432-23.2192 2.9952-47.104 24.576-47.104 24.576l-78.5152 67.4048 57.6256 67.84L763.904 65.536s-7.5776-10.0864-22.528-26.624z"
fill="#F5D69E" p-id="5520"></path>
<path d="M571.392 110.592L135.168 493.568l350.208 415.744 430.8992-378.24z" fill="#ABB2F7"
p-id="5521"></path>
<path d="M571.392 110.592L135.168 493.568 198.656 563.2 626.688 180.224z" fill="#8A91EF"
p-id="5522"></path>
<path
d="M453.4784 285.7472c-6.784-9.2672-18.7648-11.3664-26.752-4.6848s-8.96 19.6096-2.176 28.9024c6.784 9.2672 18.7648 11.3664 26.752 4.6848 7.9872-6.7072 8.96-19.6352 2.176-28.9024zM414.4384 315.7248c-6.1184-8.3456-16.128-10.8544-22.4-5.6064l-98.304 82.3296c-6.272 5.248-6.4 16.256-0.2816 24.6016s16.128 10.8544 22.4 5.6064l98.304-82.3296c6.272-5.248 6.4-16.256 0.2816-24.6016z"
fill="#FFFFFF" p-id="5523"></path>
</svg></li>
<li class="color" color='red'>
<div></div>
</li>
<li class="color" color='blue'>
<div></div>
</li>
<li class="color" color='yellow'>
<div></div>
</li>
<li class="custom_input"><input type="text" value="black"></li>
<li class="custom color" color='black'>
<div></div>
</li>
<li class="pan lineWidth" id="lineWidth" color='yellow'>
<span id="panadd"> <svg height='20px' style="font-size: 20px; height:20px" t="1629706997081" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1927" ><path d="M248.888889 497.777778l526.222222 0 0 28.444444-526.222222 0 0-28.444444Z" p-id="1928"></path><path d="M497.777778 248.888889l28.444444 0 0 526.222222-28.444444 0 0-526.222222Z" p-id="1929"></path></svg>
</span>
<input type="text" value="1" id="panlineWidth" style="height: 20px;width: 20px;text-align: center; font-size: 16px;">
<!-- <span >1</span> -->
<span id="panreduce">
<svg height='20px' style="font-size: 20px; height:20px" t="1629707070990" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2872" ><path d="M204.8 477.867h614.4v68.266H204.8z" fill="#8A8A8A" p-id="2873"></path></svg>
</span>
</li>
</ul>
</div>
<canvas id="drawingBoard" width="1400px" height="600px"></canvas>
<div id="select"> </div>
<script>
// document.style.cursor = 'pointer'
var i = 0;
var ld = false;
var panadd= document.getElementById('panadd'),panreduce= document.getElementById('panreduce'),panlineWidth= document.getElementById('panlineWidth');
var drawingBoard = document.getElementById('drawingBoard');
var ctx = drawingBoard.getContext("2d");
var y = drawingBoard.offsetTop;
var x = drawingBoard.offsetLeft;
var clear = document.getElementById('clear');
var custom = document.getElementsByClassName('custom')[0];
var colors = document.getElementsByClassName('color')
ctx.lineWidth = 1;
var zt = 'pan';
var drawingBoardZt = false;
var select = document.getElementById('select');
var panColor = 'black';
var getdata = document.getElementById('getdata');
var getimg = document.getElementById('getimg');
var h = 0,l=0;
var lineWidth=1;
for (var c = 0; c < colors.length; c++) {
colors[c].onclick = function () {
console.log(this.getAttribute('color'))
panColor = this.getAttribute('color');
}
}
document.getElementsByClassName('pan')[0].onclick = function () {
drawingBoardZt=true;
setPan(this, 'pan', event.clientX, event.clientY);
}
document.getElementsByClassName('eraser')[0].onclick = function () {
// console.log(event.clientX + ',' + event.clientY)
drawingBoardZt=true;
setPan(this, 'eraser', event.clientX, event.clientY);
}
document.getElementsByClassName('custom_input')[0].children[0].onkeyup = function () {
custom.setAttribute('color',this.value);
custom.children[0].style.background = this.value;
panColor = this.value
}
clear.onclick = function () {
drawingBoard.height = drawingBoard.height
}
getdata.onclick = function () {
console.log(ctx.getImageData(0, 0, 500, 500))
}
getimg.onclick=function(){
var img= convertCanvasToImage(drawingBoard);
document.getElementById('img').innerHTML='';
document.getElementById('img').append(img)
var imgc= document.getElementById('img').children[0].getAttribute('src')
var alink = document.createElement("a");
alink.href = imgc;
alink.download = "canvas.png";
alink.click();
}
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}
function setPan(obj, ztl, x, y) {
zt = ztl;
// console.log(zt)
select.innerHTML = obj.innerHTML; select.children[0].style.height = '30px'; select.children[0].style.width = '30px';
select.style.left = x + 'px';
select.style.top = y - 30 + 'px';
}
function draw(ctx, x, y) {
i++;
console.log(ctx.lineWidth);
ctx.lineTo(x, y);
ctx.lineWidth = lineWidth;
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = panColor;
ctx.moveTo(x, y);
}
function erase(ctx, x, y) {
ctx.clearRect(x , y -14, 14, 14);
}
document.onmousemove = function () {
// console.log(zt)
if (!ld) {
return
}
h = getScrollTop();
l=getScrollLeft();
switch (zt) {
case 'pan':
draw(ctx, event.clientX - x+l, event.clientY - y + h);
break;
case 'eraser':
erase(ctx, event.clientX - x+l, event.clientY - y + h);
break;
}
select.style.left = event.clientX +l+ 'px';
select.style.top = event.clientY - 30 + h + 'px';
}
drawingBoard.onmousedown = function () {
if (!drawingBoardZt) {
return
}
document.onmousemove();
select.removeAttribute('hidden');
select.style.left = event.clientX + getScrollLeft() +'px';
select.style.top = event.clientY - 30 + getScrollTop() + 'px';
ctx.beginPath();
ctx.strokeStyle = panColor;
ld = true
}
document.onmouseup = function () {
ctx.stroke();
select.setAttribute('hidden', 'hidden')
ld = false;
}
function getScrollTop() {//浏览器滚动条高度
scrollTop = 0;
if (document.body) {
scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
}
return scrollTop;
}
function getScrollLeft() {//浏览器滚动条左边距离
scrollLeft = 0;
if (document.body) {
scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
}
return scrollLeft;
}
panreduce.onclick=function(){
if(lineWidth<=1){
return;
}
lineWidth--;
panlineWidth.value=lineWidth;
}
panadd.onclick=function(){
lineWidth++;
panlineWidth.value=lineWidth;
}
panlineWidth.onkeyup=function(){
lineWidth= this.value;
}
</script>
</body>
</html>
标签：function,canvas,lineWidth,color,ctx,绘图,var,document 来源： https://blog.csdn.net/Liudef06/article/details/121394889