Home > Article > Web Front-end > A drawing board implemented by HTML5 Canvas

A drawing board implemented by HTML5 Canvas

阿神Original: 2016-11-08 14:26:021694browse

可通过按钮改变画笔的颜色及大小，还可将画布保存为图片在下面进行显示。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>DEMO6：自定义画板</title>
</head>
<body>
<canvas id="canvas" width="600" height="300">
    浏览器不支持canvas   <!-- 如果不支持会显示这段文字 -->
</canvas>
<br/>
<button style="width:80px;background-color:yellow;" onclick=&#39;linecolor="yellow";&#39;>YELLOW</button>
<button style="width:80px ;background-color:red;" onclick=&#39;linecolor="red";&#39;>RED</button>
<button style="width:80px ;background-color:blue;" onclick=&#39;linecolor="blue";&#39;>BLUE</button>
<button style="width:80px ;background-color:green;" onclick=&#39;linecolor="green";&#39;>GREEN</button>
<button style="width:80px ;background-color:white;" onclick=&#39;linecolor="white";&#39;>WHITE</button>
<button style="width:80px ;background-color:black;" onclick=&#39;linecolor="black";&#39;>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 style="width: 80px;background-color: white;" onclick="copyimage();">EXPORT</button>
 
<br/>
<img  src="" id="image_png"    style="max-width:90%" height="300px" alt="A drawing board implemented by HTML5 Canvas" >
<br/>
 
<script type="text/javascript">
    var canvas = document.getElementById(&#39;canvas&#39;);  //获取标签
    var ctx = canvas.getContext("2d");  
 
    var 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;
        }
    }
    function copyimage(event)
    {
        var img_png_src = canvas.toDataURL("image/png");  //将画板保存为图片格式的函数
        document.getElementById("image_png").src = img_png_src;
    }
     
    </script> 
</body>
</html>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：bootstrap-select usesNext article：bootstrap-select uses

See more

A drawing board implemented by HTML5 Canvas

Related articles