写字板

<!--

        使用脚本绘制图形

        canvas是位图（最小单位由像素组成，色彩丰富，缩放失帧）

     -->

    <canvas id="can" width="500" height="500" style="border: 1px solid red;"></canvas>

     <button id="copy">复制</button>

    <div id="qrcode"></div>

  


    <script src="./qrcode.js"></script>

    <script>

        var can = document.getElementById('can');

        // 获取canvas的绘制对象

        var ctx = can.getContext("2d");

  


        console.log(ctx);

  


        // 填充矩形

        // ctx.fillRect(20, 20, 200, 400);  // 黑色

  


        // 先规定填充的颜色

        ctx.fillStyle = 'pink';

        ctx.fillRect(20, 20, 200, 200); // 矩形是pink色

  


        ctx.strokeStyle = 'purple';  // 线条颜色

        ctx.strokeRect(20, 230, 200, 200);  // 边框矩形

  


        // ctx.clearRect(0, 0, 500, 250);  // 清除矩形区域

        ctx.clearRect(0, 0, 500, 500);  // 清除矩形区域

        // ---------------------------------------------------

  
  


        ctx.fillStyle = '#fff';

        ctx.fillRect(0, 0, 500, 500);

  


        // 线条

        ctx.strokeStyle = 'purple';  // 线条颜色

        ctx.beginPath(); // 准备开始

        ctx.moveTo(50, 50);  // 落笔点

        ctx.lineTo(90, 150);  // 下一个点

        ctx.lineTo(10, 150);  // 下一个点

        ctx.closePath();  // 闭合

  


        ctx.stroke(); // 画线

  


        ctx.fillStyle = 'red';

        ctx.fill();

  
  


        ctx.font = "20px sans-serif";

        ctx.fillText('ikun', 90, 150);

  
  
  


        //

        new QRCode(document.getElementById("qrcode"), {

            text: "https://kuwo.cn",

            width: 128,

            height: 128,

            colorDark: "pink",

            colorLight: "#ff6700",

            correctLevel: QRCode.CorrectLevel.H

        });

  


        // var qrcode = document.getElementById('qrcode');

        var qrImg = qrcode.getElementsByTagName('img')[0];

        console.log(qrImg);

        qrImg.onload = function () {

            ctx.drawImage(qrImg, 200, 200);

        }

  
  


        copy.onclick = function() {

  


            // 剪切板   需要一个参数：blob

  


            can.toBlob(function(blob) {

                console.log(blob);

                var item = new ClipboardItem({"image/png": blob});

                // 写入剪切板

                navigator.clipboard.write([item]).then(() => {

                    console.log('复制成功！');

                })

            })

        }

<canvas id="can" width="500" height="500" style="border: 1px solid red;"></canvas>

    <input type="range" id="range" max="20" min="1" value="1">

    <input type="color" id="color">

    <button id="clear">清除</button>
    
    
    
    
    var can = document.getElementById('can');

        var ctx = can.getContext('2d');

        console.log(ctx);

        // mousexxx都是鼠标事件   在移动端都无法使用

        // 移动端都是touch事件

        can.ontouchstart = can.onmousedown = function() {

            console.log(666, event);

            ctx.beginPath();

            ctx.moveTo(event.offsetX, event.offsetY);

  


            can.onmousemove = function() {

                ctx.lineTo(event.offsetX, event.offsetY);

                ctx.stroke();

            }

  


            can.ontouchmove = function() {

                console.log(event);

                var x = event.changedTouches[0].pageX - can.offsetLeft;

                var y = event.changedTouches[0].pageY - can.offsetTop;

                ctx.lineTo(x, y);

                ctx.stroke();

            }

        }

  


        can.onmouseup = can.onmouseleave = function() {

            can.onmousemove = null;

        }

  
  


        range.oninput = function() {

            console.log(range.value);

            ctx.lineWidth = range.value;

        }

        color.onchange = function() {

            console.log(color.value);

            ctx.strokeStyle = color.value;

        }

  


        clear.onclick = function() {

            ctx.clearRect(0, 0, 500, 500)

        }