200字范文 > Html5画布（canvas）实例之绘制矩形

Html5画布（canvas）实例之绘制矩形

时间：2021-01-25 07:41:48

路径方式绘制 - 矩形 | rect()

canvas/shape/path/rect.html

<!DOCTYPE HTML>

<html>

<head>

<title>以路径的方式在 canvas 上绘制矩形的 demo</title>

</head>

<body>

<canvas id="canvas" width="300" height="360" style="background-color: rgb(222, 222, 222)">

您的浏览器不支持 canvas 标签

</canvas>

<br/>

<button type="button" onclick="drawIt();">在画布上绘制矩形</button>

<button type="button" onclick="clearIt();">清除画布</button>

<script type="text/javascript">

var ctx = document.getElementById('canvas').getContext('2d');

function drawIt() {

clearIt();

ctx.strokeStyle = "Black";

/*

* context.rect(x, y, w, h) - 以路径的方式绘制一个矩形

* x - 矩形左上角的 x 坐标

* y - 矩形左上角的 y 坐标

* w - 矩形的宽

* h - 矩形的高

*/

ctx.beginPath();

ctx.rect(20, 20, 260, 320);

ctx.stroke();

}

function clearIt() {

ctx.clearRect(0, 0, 300, 360);

}

</script>

</body>

</html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。