zoukankan      html  css  js  c++  java
  • Canvas 画板

    Canvas 画板

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>canvas draw</title>
    </head>
    
    <body>
        <canvas id='myCanvas' width='800' height='600'>
            your browser does not support canvas
        </canvas>
        <script type="text/javascript">
        var c = document.getElementById('myCanvas');
        var ctx = c.getContext('2d');
        ctx.fillStyle = 'black';
        ctx.fillRect(0, 0, 800, 600);
        var onoff = false;
        var oldx = -10;
        var oldy = -10;
        var lineColor = 'white';
        var linw = 4;
        c.addEventListener('mousemove', draw, true);
        c.addEventListener('mousedown', down, false);
        c.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;
            }
        }
        </script>
    </body>
    
    </html>
  • 相关阅读:
    屏幕后处理方案
    颜色空间
    汉字编码
    物理引擎的确定性研究
    关于List<T>.Sort方法
    Mono跨平台系统大小端问题
    谜之UnityEngine.Object
    第三方平台隐私条款
    Unity DownloadHandler测试
    了解Xcode Bitcode
  • 原文地址:https://www.cnblogs.com/stono/p/4673326.html
Copyright © 2011-2022 走看看