canvas 用法

<!DOCTYPE html>
<html>
<head>
    <title>chars video</title>
    <meta charset="utf-8">
</head>
<body>
<canvas>Canvas is not supported in your browser.</canvas>
<script>

let canvas = document.querySelector("canvas");
let ctx = canvas.getContext("2d");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;


ctx.beginPath();
ctx.strokeStyle = "green";
ctx.arc(100,100,50,0,180);
ctx.closePath();
ctx.stroke();


ctx.fillStyle = "red";
ctx.rect(0,0,100,100);
ctx.fill();


ctx.beginPath();
ctx.moveTo(200,200);
ctx.lineTo(200,300);
ctx.lineTo(300,200);
ctx.closePath();        // 先关闭再填充,不然少最后一条线
ctx.stroke();


// 取值范围
function random(min, max) {
  return Math.random() * (max - min) + min;
}

</script>
</body>
</html>
赞(0) 打赏
取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

    暂无评论...