JS + Canvas画图Demo

程序员文章站 2022-05-22 22:36:57

直接上代码，复制粘贴就能用： <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

直接上代码，复制粘贴就能用：

<%@ page language="java" contenttype="text/html; charset=utf-8"
    pageencoding="utf-8"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>insert title here</title>
<script src="public/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
    canvas {
    background:#ccc;
    display:block;
    margin:0 auto;
}
#controls {
    width:200px;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    background:linear-gradient(to bottom,#000000,#b8b8b8);
    user-select:none;
}
#controls section {
    margin-top:10px;
    height:20px;
}
#controls .label {
    width:50%;
    height:20px;
    line-height:20px;
    text-align:center;
    color:#fff;
    display:block;
    float:left;
}
#xing {
    float:right;
    width:50%;
    height:20px;
}
/*#shape {
    */
        /*width:50%;
    height:20px;
    display:block;
    */
        /*
}
*/
        #controls .color {
    width:50%;
    height:auto;
    float:right;
}
#colors input {
    float:right;
    width:48%;
    height:20px;
    border:none;
}
#widths input {
    float:right;
    width:49%;
    height:20px;
    border:none;
}
#style {
    float:right;
    width:49%;
    height:20px;
    border:none;
}
input[type=button] {
    width:150px;
    height:30px;
    background:#c40000;
    color:#fff;
    border-radius:5px;
    margin-top:10px;
    margin-left:10px;
    border:none;
    display:block;
}
</style>
</head>
<body>
    <canvas width="500" height="500"></canvas>
<div id="controls">
 
    <section id="shape">
        <label for="shape" class="label">选择形状 : </label>
        <select id="xing">
            <option value="rect">矩形</option>
            <option value="line">直线</option>
            <option value="circle">内切圆</option>
            <option value="circle1">外接圆</option>
            <option value="circle2">中心圆</option>
            <option value="poly">多边形</option>
            <option value="pen">铅笔</option>
            <option value="eraser">橡皮</option>
        </select>
    </section>
 
    <section id="colors">
        <label for="color" class="label">选择颜色 : </label>
        <input type="color" id="color">
    </section>
    <section id="widths">
        <label for="color" class="label">选择线宽 : </label>
        <input type="number" id="width" value="2" step="2" min="2" max="20">
    </section>
    <section id="styles">
        <label for="shape" class="label">选择方式 : </label>
        <select id="style">
            <option value="stroke">描边</option>
            <option value="fill">填充</option>
        </select>
    </section>
    <section id="sides">
        <label for="side" class="label">选择边数 : </label>
        <input type="number" id="side" value="3" min="3" max="20">
    </section>
    <input type="button" value="撤销" id="redo">
    <input type="button" value="保存" id="save">
    <input type="button" value="清空" id="qingkong">
</div>
</body>
<script type="text/javascript">
var canvas = document.queryselector("canvas");
var cobj = canvas.getcontext("2d");
var shape = document.queryselector("#xing");
var color = document.queryselector("#color");
var width = document.queryselector("#width");
var style = document.queryselector("#style");
var side = document.queryselector("#side");
var redo = document.queryselector("#redo");
var save = document.queryselector("#save");
var qingkong = document.queryselector("#qingkong");
console.log(side);
var data = [];
var s = "rect";
shape.onchange = function() {
    s = this.value;
};
var c = "#000";
color.onchange = function() {
    c = this.value;
};
var w = "2";
width.onchange = function() {
    w = this.value;
};
var st = "stroke";
style.onchange = function() {
    st = this.value;
};
var sd = "3";
side.onchange = function() {
    sd = this.value;
};

canvas.onmousedown = function(e) {
    var ox = e.offsetx;
    var oy = e.offsety;
    var draw = new draw(cobj, {
        color: c,
        width: w,
        style: st,
        side: sd
    });
    if (s == "pen") {
        cobj.beginpath();
        cobj.moveto(ox, oy);
    }
    canvas.onmousemove = function(e) {
        var mx = e.offsetx;
        var my = e.offsety;
        if (s != "eraser") {
            cobj.clearrect(0, 0, 500, 500);
            if (data.length != 0) {
                cobj.putimagedata(data[data.length - 1], 0, 0, 0, 0, 500, 500); //将某个图像数据放置到画布指定的位置上  后面四个参数可省略
            }
        }
        //            cobj.strokerect(ox,oy,mx-ox,my-oy);
        // cobj.beginpath()
        draw[s](ox, oy, mx, my, sd);
    };
    document.onmouseup = function() {
        data.push(cobj.getimagedata(0, 0, 500, 500)); //获取画布当中指定区域当中所有的图形数据
        canvas.onmousemove = null;
        document.onmouseup = null;
    }
};
redo.onclick = function() {
    if (data.length == 0) {
        alert("无效操作");
        return;
    }
    cobj.clearrect(0, 0, 500, 500);
    data.pop();
    if (data.length == 0) {
        return;
    }
    cobj.putimagedata(data[data.length - 1], 0, 0, 0, 0, 500, 500);
};
save.onclick = function() {
    var r = canvas.todataurl();
    location.assign(r)
};
qingkong.onclick = function() {
    cobj.clearrect(0, 0, 500, 500);
    data = [];
}
class draw {
    constructor(cobj, option) {
        this.cobj = cobj;
        this.color = option.color;
        this.width = option.width;
        this.style = option.style;
    }
    init() { //初始化
        this.cobj.strokestyle = this.color;
        this.cobj.fillstyle = this.color;
        this.cobj.linewidth = this.width;
    }
    rect(ox, oy, mx, my) {
        this.init();
        this.cobj.beginpath();
        this.cobj.rect(ox, oy, mx - ox, my - oy);
        this.cobj[this.style]();

    }
    line(ox, oy, mx, my) {
        this.init();
        this.cobj.beginpath();
        this.cobj.moveto(ox, oy);
        this.cobj.lineto(mx, my);
        this.cobj.stroke();
    }
    circle(ox, oy, mx, my) { //内切圆
        this.init();
        this.cobj.beginpath();
        /*        var r=math.sqrt(math.pow(mx-ox,2)+math.pow(my-oy,2))/2;
                this.cobj.arc(ox+(mx-ox)/2,oy+(my-oy)/2,r,0,2*math.pi);*/
        var r = math.abs(mx - ox) > math.abs(my - oy) ? math.abs(my - oy) / 2 : math.abs(mx - ox) / 2;
        this.cobj.arc(ox + (ox < mx ? r : -r), oy + (oy < my ? r : -r), r, 0, 2 * math.pi);
        this.cobj[this.style]();
    }
    circle1(ox, oy, mx, my) { //外接圆
        this.init();
        this.cobj.beginpath();
        var r = math.sqrt(math.pow(mx - ox, 2) + math.pow(my - oy, 2)) / 2;
        this.cobj.arc(ox + (mx - ox) / 2, oy + (my - oy) / 2, r, 0, 2 * math.pi);
        this.cobj[this.style]();
    }
    circle2(ox, oy, mx, my) { //中心圆
        this.init();
        this.cobj.beginpath();
        var r = math.sqrt(math.pow(mx - ox, 2) + math.pow(my - oy, 2));
        this.cobj.arc(ox, oy, r, 0, 2 * math.pi);
        this.cobj[this.style]();
    }
    poly(ox, oy, mx, my, sd) {
        this.init();
        this.cobj.save();
        cobj.translate(ox, oy);
        this.cobj.rotate(math.pi / 2);
        var angle = math.pi / sd;
        var r = math.sqrt(math.pow(mx - ox, 2) + math.pow(my - oy, 2));
        var x = math.cos(angle) * r;
        var y = math.sin(angle) * r;
        this.cobj.beginpath();
        this.cobj.moveto(x, y);
        for (var i = 0; i < sd; i++) {
            this.cobj.lineto(x, -y);
            this.cobj.rotate(-angle * 2)
        }
        this.cobj[this.style]();
        this.cobj.restore()
    }
    pen(ox, oy, mx, my) {
        this.init();
        this.cobj.lineto(mx, my);
        this.cobj.stroke();
    }
    eraser(ox, oy, mx, my) {

        this.cobj.clearrect(mx, my, 10, 10);
    }

}
</script>

</html>

效果图：

JS + Canvas画图Demo

原文链接：

上一篇：谁说程序员不浪漫？Python导出微信聊天记录生成爱的词云图

下一篇：清朝最牛的家族，前后诞生了六个皇后

JS + Canvas画图Demo

JS和canvas实现俄罗斯方块

HTML5 Canvas鼠标与键盘事件demo示例

JS+canvas画布实现炫酷的旋转星空效果示例

HTML5 canvas画图并保存成图片的jcanvas插件

js Canvas绘制圆形时钟效果

JS使用canvas中的measureText方法测量字体宽度示例

浅谈基于Canvas的手绘风格图形库Rough.js

js canvas实现红包照片效果

HTML5 Canvas+JS控制电脑或手机上的摄像头实例

微信小程序使用canvas的画图操作示例