HTML5 -- canvas画板转为图片

来源：互联网发布：php assign方法编辑：程序博客网时间：2024/04/30 11:44
效果预览：
这里写图片描述
代码部分：
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <body>        <canvas id="canvas" width="600" height="300"></canvas><br>        <button style="width:80px;background-color:yellow; " onclick='linecolor = "yellow ";'>YELLOW</button>        <button style="width:80px;background-color:red; " onclick='linecolor = "red ";'>RED</button>        <button style="width:80px;background-color:blue; " onclick='linecolor = "blue ";'>BLUE</button>        <button style="width:80px;background-color:green; " onclick='linecolor = "green ";'>GREEN</button>        <button style="width:80px;background-color:white; " onclick='linecolor = "white ";'>WHITE</button>        <button style="width:80px;background-color:black;color:white; " onclick='linecolor = "black ";'>BLACK</button>        <br>        <button style="width:80px;background-color:white; " onclick="linw=4;">4px</button>        <button style="width:80px;background-color:white; " onclick="linw=8;">8px</button>        <button style="width:80px;background-color:white; " onclick="linw=16;">16px</button>        <br>        <button id="but10 " style="width:80px;background-color:pink; " onclick="copyimage(); ">EXPORT</button>        <br>        <img src="" id="image_png" width="600" height="300">        <script type="text/javascript">            var c = document.getElementById('canvas');            var ctx = c.getContext('2d');            //画一个黑色矩形            ctx.fillStyle = 'black';            ctx.fillRect(0, 0, 600, 300);            //按下标记            var onoff = false;            var oldx = -10;            var oldy = -10;            //设置颜色            var linecolor = 'white';            //设置线宽            var linw = 4;            //添加鼠标移动事件            canvas.addEventListener('mousemove', draw, true);            //添加鼠标按下事件            canvas.addEventListener('mousedown', down, false);            //添加鼠标弹起事件            canvas.addEventListener('mouseup', up, false);            //鼠标按下获取坐标            function down(event) {                onoff = true;                oldx = event.pageX - 10;                oldy = event.pagey - 10;            }            //鼠标弹起取消绘制            function up() {                onoff = false;            }            //获取鼠标坐标，并根据坐标绘制图像            function draw(event) {                if(onoff == true) {                    var newx = event.pageX - 10;                    var newy = event.pageY - 10;                    ctx.beginPath();                    ctx.moveTo(oldx, oldy);                    ctx.lineTo(newx, newy);                    ctx.strokeStyle = linecolor;                    ctx.lineWidth = linw;                    ctx.lineCap = 'round';                    ctx.stroke();                    oldx = newx;                    oldy = newy;                }            }            //转canvas保存为base64 dataURL            function copyimage(event) {                var img_png_src = canvas.toDataURL('image/png');                document.getElementById('image_png').src = img_png_src;            }                   </script>    </body></html>
阅读全文
0 0