Html5画布（canvas）实例之绘制矩形
生活随笔
收集整理的這篇文章主要介紹了
Html5画布（canvas）实例之绘制矩形
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
路徑方式繪制 - 矩形 | rect()
canvas/shape/path/rect.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>
總結
以上是生活随笔為你收集整理的Html5画布（canvas）实例之绘制矩形的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Html5表单元素-搜索框和上传文件框
- 下一篇： Html5开发-使用Canvas绘制图片