canvas 學(xué)習(xí) 3---畫(huà)坐標(biāo)系
發(fā)表時(shí)間：2023-09-01 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]無(wú)論您是新手，還是老手，本教程都值得一讀。<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>網(wǎng)格</tit...
無(wú)論您是新手，還是老手，本教程都值得一讀。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>網(wǎng)格</title>
<style>
#c1{
border:1px solid black;
}
</style>
<script>
window.onload = function(){
var oCanvas = document.getElementById('c1')
var gd = oCanvas.getContext('2d')
// 你要畫(huà)一個(gè)表格：
// 你得思考，每個(gè)格子多大！
var space = 20
// 1, 得到 畫(huà)布的寬和高
var cWidth = gd.canvas.width;
var cHeight = gd.canvas.height;
// 當(dāng)你記不住api 的時(shí)候，就打印出來(lái)看看！
var lines = Math.floor(cHeight/space)
var cols = Math.floor(cWidth/space)
for(let i = 0;i<lines;i++){
gd.beginPath()
gd.moveTo(0,space*i-0.5)
gd.lineTo(cWidth,space*i-0.5)
gd.strokeStyle='#aaa'
gd.stroke();
}
// 畫(huà)第二個(gè)豎著的格子！
for(let j = 0; j<cols;j++){
gd.beginPath();
gd.moveTo(space*j-0.5,0)
gd.lineTo(space*j-0.5,cHeight)
gd.strokeStyle="#aaa"
gd.stroke()
}
// 下面是畫(huà)那個(gè)坐標(biāo)！
// 1, everPadding（坐標(biāo)離 網(wǎng)格邊界的上下左右的距離�。�
var everPadding = 40
// 起點(diǎn)(坐標(biāo)原點(diǎn))
var x0 = everPadding;
var yo = cHeight -everPadding
// x 軸，終點(diǎn)：
var x1 = cWidth-everPadding;
// 豎著方向：
// 畫(huà)著再說(shuō)：
gd.beginPath();
gd.moveTo(x0,yo)
gd.lineTo(x1,yo)
gd.lineTo(x1-space,yo-space)
gd.lineTo(x1-space,yo+space)
gd.lineTo(x1,yo)
gd.strokeStyle="red"
gd.fillStyle="red"
gd.stroke()
gd.fill()
gd.beginPath()
gd.moveTo(x0,yo)
gd.lineTo(x0,everPadding)
gd.lineTo(x0-space,everPadding+space)
gd.lineTo(x0+space,everPadding+space)
gd.lineTo(x0,everPadding)
gd.strokeStyle="red"
gd.fillStyle="red"
gd.stroke()
gd.fill()
}
</script>
</head>
<body>
<canvas id="c1" width="500" height="500"></canvas>
</body>
</html>
顯示：
相關(guān)推薦：
HTML5 Canvas入門(mén)學(xué)習(xí)教程_html5教程技巧
HTML5 Canvas之測(cè)試瀏覽器是否支持Canvas的方法_html5教程技巧
以上就是canvas 學(xué)習(xí) 3---畫(huà)坐標(biāo)系的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
