js语法笔记4---canvas

来源：互联网发布：wifi网络监控软件编辑：程序博客网时间：2024/06/05 08:29
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body style="background: rgba(199,237,204,1)"><div style="display:flex; flex-direction: row">    <!--通过style方式为canvas设置宽高在火狐浏览器上导致绘制内容纵向拉伸。。。-->    <canvas id="drawing" width="400px" height="400px">canvas to draw</canvas>    <pre id="container" style="margin: 10px"/></div></body><script type="text/javascript">    var drawing = document.getElementById('drawing');    if (drawing.getContext) {        print('support')        var context = drawing.getContext('2d');        context.fillStyle = '#fff';        context.fillRect(0, 0, 400, 400);        context.fillStyle = 'black'        for (let i in [0, 1, 2, 3, 4, 5, 6, 7]) {            context.fillText(i * 50, i * 50, 10)            context.fillText(i * 50, 0, i * 50)        }        context.font = 'bold 15px Arial';        context.textAlign = 'left';        context.textBaseline = 'bottom'        draw(context);    } else {        print('not ')    }    function draw(context) {        context.fillStyle = 'red';        context.fillRect(10, 10, 150, 150);        context.fillStyle = 'rgba(0,255,0,0.5)';        context.fillRect(100, 100, 150, 150);        context.lineWidth = 0.5;        context.strokeStyle = 'blue';        context.strokeRect(50, 50, 150, 150);        context.fillStyle = 'black'        context.fillText('hello canvas', 200, 400)        context.clearRect(125, 125, 25, 25)        context.clearRect(20, 20, 25, 25)//        context.lineCap//context.lineJoin        context.strokeStyle = '#0f08'        context.moveTo(50, 50);        context.lineTo(100, 100);        context.lineTo(50, 100);        context.closePath();        context.stroke();        context.fillStyle = '#e1e1e188'        context.rect(200, 200, 150, 150)        context.fill();        drawClock(context);        context.fillText('hello', 0, 15)        drawLine(context);        // toImage();    }    function drawLine(context) {        context.save();        context.lineCap = 'round'        context.lineJoin = 'bevel' //miter  round        context.strokeStyle = '#00f'//        context.lineWidth=3        context.translate(300, 300)        context.moveTo(0, 0);        context.lineTo(80, 80);        context.stroke()        context.moveTo(80, 0);        context.lineTo(0, 80)        context.stroke()        context.restore();    }    function drawClock(context) {        context.save();        context.strokeStyle = 'black';//        context.lineJoin='miter'        context.lineWidth = 3        context.lineCap = 'round' //round square butt        context.beginPath();        context.arc(100, 100, 99, 0, 2 * Math.PI, false);        context.arc(100, 100, 94, 0, 2 * Math.PI, false);        context.moveTo(100, 100);        context.lineTo(100, 15);        context.moveTo(100, 100);        context.lineTo(35, 100);        context.stroke();        context.fillStyle = '#000'        context.translate(100, 100);        for (i of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]) {            context.rotate(Math.PI / 6);            context.fillText(i + "", 0, -80)        }        context.restore();    }    function toImage() {        var imageUri = drawing.toDataURL('image/png');        var imageTag = document.createElement('img');        imageTag.style = 'margin:10px;width:200px;height:200px'        imageTag.src = imageUri;        document.body.appendChild(imageTag)    }    function print(txt) {        document.getElementById("container").innerHTML += ('\n') + txt;    }    document.body.onclick = function () {        window.location.reload()    }    console.log = print;</script></html>
0 0