<!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>
canvas 用法
相关推荐
评论
暂无评论...