canvas 學習
canvas大小的設定
`
<canvas id="canvas" width="需要的寬" height="需要的高"></canvas>或者
<script>
var canvas = document.querySelector('canvas')
ctx = canvas.getContext('2d')
canvas.width = 需要的寬
canvas.height = 需要的高
</script>
`
使用canvas畫一條線
畫一條線：
方法：
`moveTo(起始點x,起始點y),
ctx.lineTo(終點x,終點y),
ctx.stroke()
ctx.stroke()函數`
`
<script>
ctx.beginPath()
ctx.moveTo(100,100)
ctx.lineTo(700,700)
ctx.lineTo(100,700)
ctx.lineTo(100,100)
ctx.closePath()
ctx.lineWidth = 5 //線段的寬度
ctx.strokeStyle = "#005588"
ctx.stroke()
// ctx.fillstyle = "#005588"
//ctx.fill()
</script>
`
繪製一個七巧板
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
canvas{
border:1px solid #ddd;
}
</style>
</head>
<body>
<canvas></canvas>
</body>
<script>
var tangram = [
{point:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:'#caff67'},
{point:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:'#67becf'},
{point:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:'#ef3d61'},
{point:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:'#f9f51a'},
{point:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:'#a594c0'},
{point:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:'#fa8ecc'},
{point:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:'#f6ca29'},
]
let canvas = document.querySelector('canvas')
canvas.width=800
canvas.height = 800
let ctx = canvas.getContext('2d')
for(var i=0;i<tangram.length;i++){
draw(tangram[i],ctx)
}
function draw(item,ctx) {
ctx.beginPath()
ctx.moveTo(item.point[0].x,item.point[0].y)
for(var i=1;i<item.point.length;i++){
ctx.lineTo(item.point[i].x,item.point[i].y)
}
ctx.closePath()
ctx.fillStyle = item.color
ctx.fill()
}
</script>
</html>
繪製弧線
方法：
ctx.arc(centerX,centerY,radius,startAngle,endAngle,anticlockwise = false)
<script>
ctx.lineWidth = 5
ctx.arc(200,200,200,0,1.5*Math.PI())
ctx.strokeStyle = 'black'
ctx.stroke()
</script>
繪製弧
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
canvas{
border:1px solid #ddd;
}
</style>
</head>
<body>
<canvas></canvas>
</body>
<scrlet canvas = document.querySelector('canvas')
canvas.width=800
canvas.height = 800
let ctx = canvas.getContext('2d')
for(var i = 0;i<=10;i++){
ctx.beginPath()
ctx.arc(80*i+40,50,30,0,2*Math.PI*(i+1)/10)
ctx.closePath() //會自動閉合路徑
ctx.strokeStyle = '#005588'
ctx.stroke()
}
for(var i = 0;i<=10;i++){
ctx.beginPath()//會重新開始一個路徑
ctx.arc(80*i+40,200,30,0,2*Math.PI*(i+1)/10)
// ctx.closePath()
ctx.strokeStyle = '#005588'
ctx.stroke()
}
for(var i = 0;i<=10;i++){
ctx.beginPath()
ctx.arc(80*i+40,350,30,0,2*Math.PI*(i+1)/10,true)
ctx.closePath() //會自動閉合路徑
ctx.strokeStyle = '#005588'
ctx.stroke()
}
</script>
</html>