HTML5 -- canvas画板转为图片

最新推荐文章于 2023-02-14 18:35:19 发布

豆i浆

最新推荐文章于 2023-02-14 18:35:19 发布

阅读量582

点赞数

分类专栏： html5 canvas 文章标签： html5 canvas

本文链接：https://blog.csdn.net/sinat_19327991/article/details/77050717

版权

html5 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

canvas

3 篇文章 0 订阅

订阅专栏

效果预览：

这里写图片描述

代码部分：

<!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>

豆i浆

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5 -- canvas画板转为图片

效果预览：代码部分：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="canvas" width="600" height="300"></canvas><br> <butto
复制链接

扫一扫

专栏目录