用canvas寫一個簡易畫圖工具

本文轉載自查看原文 2019-11-13 09:11 296 canvas

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <canvas id="myCanvas" width="800" height="500"
    style="border:1px solid #000000;">您的瀏覽器不支持canvas
</canvas>
<script type="text/javascript">
    var c =document.querySelector('#myCanvas');
    // 標識畫布並指明上下文
    var ctx = c.getContext('2d');

    ctx.strokeStyle = '#000';
    ctx.lineWidth = 3;
    c.onmousedown = function (ev){
        ctx.beginPath();
        ctx.moveTo(ev.clientX,ev.clientY)
        c.onmousemove = function (ev) {
            ctx.lineTo(ev.clientX,ev.clientY);
            ctx.stroke()
        }
        c.onmouseup = function () {
            c.onmousemove = null;
        }
    }
</script>

</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 HTML5簡易在線畫圖工具用canvas繪制一個簡易時鍾使用Canvas制作畫圖工具使用 C# 和 OpenGL (SharpGL) 實現的一個簡易畫圖版用HTML5 Canvas做一個畫圖板 Summer——從頭開始寫一個簡易的Spring框架如何用 Python 寫一個簡易的抽獎程序手寫一個簡易的ajax請求使用PHP寫一個簡易接口手寫一個簡易的IOC