<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas繪制矩形</title>
</head>
<body style="padding: 100px;">
<canvas id="canvas" width="900" height="600" style="border:1px solid #000"></canvas>
<script>
// 1. 獲取標簽
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// 2. 繪制矩形 - 方式一
ctx.rect(100, 100, 200, 200);
// 繪制
ctx.strokeStyle = 'red';
ctx.lineWidth = 10;
ctx.stroke();
// 填充
ctx.fillStyle = 'blue';
ctx.fill();
// 3.繪制矩形 - 方式二
ctx.beginPath();
ctx.fillStyle = 'pink';
ctx.strokeStyle = 'yellow';
ctx.lineWidth = 15;
ctx.fillRect(400, 200, 200, 100);
ctx.strokeRect(400, 200, 200, 100);
// 4. 清除矩形
ctx.beginPath();
ctx.clearRect(400, 200, 90, 90);
// 5.清屏
// ctx.clearRect(0, 0, canvas.width, canvas.height);
</script>
</body>
</html>
06繪制矩形
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
- 文/潘曉璐 我一進店門迅栅，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人晴玖，你說我怎么就攤上這事读存∥鳎” “怎么了？”我有些...
- 文/不壞的土叔 我叫張陵让簿，是天一觀的道長敬察。 經(jīng)常有香客問我，道長尔当，這世上最難降的妖魔是什么莲祸？ 我笑而不...
- 正文 為了忘掉前任，我火速辦了婚禮椭迎，結(jié)果婚禮上锐帜，老公的妹妹穿的比我還像新娘。我一直安慰自己畜号，他們只是感情好缴阎，可當(dāng)我...
- 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著简软，像睡著了一般蛮拔。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上痹升，一...
- 文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼绳锅！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起酝掩，我...
- 正文 年R本政府宣布负乡，位于F島的核電站，受9級特大地震影響脊凰，放射性物質(zhì)發(fā)生泄漏抖棘。R本人自食惡果不足惜，卻給世界環(huán)境...
- 文/蒙蒙 一狸涌、第九天 我趴在偏房一處隱蔽的房頂上張望切省。 院中可真熱鬧，春花似錦帕胆、人聲如沸朝捆。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽右蹦。三九已至，卻和暖如春歼捐，著一層夾襖步出監(jiān)牢的瞬間何陆，已是汗流浹背。 一陣腳步聲響...
推薦閱讀更多精彩內(nèi)容
- 概述 吐槽下IOS下 的圖形繪圖贤姆，代碼冗長，不得不自己重新封裝方法稳衬。整理形成本文霞捡。 繪制線 繪制矩形 垂直和居中繪...
- UIBezierPath*path = [UIBezierPathbezierPath]; [pathmoveTo...
- 內(nèi)外cornerRadius可以控制 baseLayer是我們原始的圖層，現(xiàn)在想截取圓角矩形出來薄疚，中間挖空成一個圓...
- 文｜丁西行 前一陣外出游玩碧信，在朋友圈發(fā)了兩張照片赊琳，有個久未聯(lián)系的朋友突然私信我，評論我日子過得舒服音婶，讓她羨慕嫉妒恨...
