canvas画板代码

Html

Css

* {
	margin:0;
	padding:0;
}
#canvas {
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
}
#settings {
	width:300px;
	display:flex;
	flex-direction:column;
	gap:30px;
}
.setting {
	width:100%;
	height:30px;
	display:flex;
	gap:10px;
}
.setting input {
	width:100px;
}

let canvas = document.getElementById("canvas");
let save = document.getElementById("save");
let panSize = document.getElementById("pan-size");
let panColor = document.getElementById("pan-color");
let sizeX = document.getElementById("sizeX");
let sizeY = document.getElementById("sizeY");
let canvasColor = document.getElementById("canvas-color");
let sizeOk = document.getElementById("size-ok");
let ctx = canvas.getContext("2d");

let def_panSize = 5; //默认画笔大小
let def_panColor = "#fff"; //默认画笔颜色
let def_sizeX = 500; //默认画布宽度
let def_sizeY = 500; //默认画布高度
let def_canvasColor = "#000"; //默认画布颜色

sizeOk.onclick = function() {
    def_sizeX = sizeX.value ? sizeX.value : 500;
    def_sizeY = sizeY.value ? sizeY.value : 500;
    canvas.width = def_sizeX;
    canvas.height = def_sizeY;
    ctx.fillStyle = canvasColor.value ? canvasColor.value : def_canvasColor;
    ctx.fillRect(0, 0, def_sizeX, def_sizeY)
}

changePanColor = function() {
    def_panColor = panColor.value;
}
changePanSize = function() {
    def_panSize = panSize.value;
}

canvas.onmousedown = function(e) {
    if (e.button === 0) {
        let target = e.target;
        let downX = e.clientX - target.offsetLeft < 0 ? 0 : e.clientX - target.offsetLeft;
        let downY = e.clientY - target.offsetTop < 0 ? 0 : e.clientY - target.offsetTop;

ctx.strokeStyle = def_panColor;
        ctx.lineWidth = def_panSize;
        ctx.lineCap = "round"
        ctx.beginPath();
    }

canvas.onmousemove = function(e) {
        let target = e.target;
        let x = e.clientX - target.offsetLeft < 0 ? 0 : e.clientX - target.offsetLeft;
        let y = e.clientY - target.offsetTop < 0 ? 0 : e.clientY - target.offsetTop;
        ctx.lineJoin = "round";
        ctx.lineTo(x, y);
        ctx.stroke();

}

canvas.onmouseup = function() {
        canvas.onmousemove = null;
    }
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

canvas画板代码



代码描述：用canvas实现的可调整画板颜色，大小，画笔颜色，大小。右键可将画板保存为图片

更新时间：2021-05-31 00:44:46
用canvas实现的可调整画板颜色，大小，画笔颜色，大小。右键可将画板保存为图片

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

1

相关代码

canvas画板代码

最新