js语法笔记4---canvas

最新推荐文章于 2023-06-07 17:18:47 发布

万剑

最新推荐文章于 2023-06-07 17:18:47 发布

阅读量469

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/qingchunweiliang/article/details/71304928

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!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>