canvas最小模板

Posted Rand Tsui

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了canvas最小模板相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas base</title>
    <style>
        *
            margin: 0;
            padding: 0;
        
        body

        
        #c
            position: relative;
            display: block;
        

    </style>
</head>
<body>
<canvas id="c"></canvas>


<script>

    let canvas = document.querySelector('#c');
    let W = window.innerWidth;
    let H = window.innerHeight;
    canvas.width = W;
    canvas.height = H;
    let ctx = canvas.getContext('2d');




    console.log(ctx.fillStyle); //#000000
    console.log(ctx.strokeStyle); //#000000
    console.log(ctx.shadowColor); //rgba(0,0,0,0)
    console.log(ctx.shadowBlur);  //0
    console.log(ctx.shadowOffsetX); //0
    console.log(ctx.shadowOffsetY);  //0


    console.log(ctx.lineCap);   //butt
    console.log(ctx.lineJoin);   //miter
    console.log(ctx.lineWidth);   //1
    console.log(ctx.miterLimit);   //10



    function draw()
        ctx.clearRect(0, 0, W, H);
        ctx.fillStyle= "#eeffff";
        ctx.fillRect(0, 0, W, H);

    

    draw();


</script>

</body>
</html>

以上是关于canvas最小模板的主要内容,如果未能解决你的问题,请参考以下文章

canvas最小模板

怎么将canvas里面的模板转到wps

javascript Canvas Util:HTML模板

Animate CC Canvas 导出嵌入角度模板

canvas测试怎么完成

canvas 转base64 内容没有东西