用canvas畫一個七竅板

GOZO發表於2024-03-24
Canvas
<!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{
        width: 1024px;
        height: 1024px;
        border: 1px solid #aaa ;
        display: block;
        margin: 200px auto;
    }
</style>
</head>
<body>
  <canvas id="canvas"></canvas>
<script>
    window.onload =function (){
        if (canvas.getContext("2d")){
            let canvas = document.getElementById("canvas")
            // 定義畫布大小
            canvas.width =1024;
            canvas.height =1024;
            let context =canvas.getContext("2d")
            // 開始位置
            context.beginPath()
            context.moveTo(0,0)
            //x,y座標
            context.lineTo(512,512)
            context.lineTo(0,1024)
            context.width=5
            // context.style ="#280606"
            // 填充背景顏色
            context.fillStyle = "rgb(20,152,201)"
            // 然後開始填充
            context.fill()
            // 這裡定義了線條顏色
            context.strokeStyle ="red"
            context.closePath()
            // 這裡是開始繪製
            context.stroke()
            context.beginPath()
            context.moveTo(0,0)
            context.lineTo(512,512)
            context.lineTo(1024,0)
            context.width=5
            context.fillStyle = "rgb(107,201,20)"
            context.fill()
            context.closePath()
            context.stroke()
            context.beginPath()
            context.moveTo(1024,0)
            context.lineTo(724,300)
            context.lineTo(724,810)
            context.lineTo(1024,500)
            context.fillStyle = "rgb(143,102,39)"
            context.fill()
            context.closePath()
            context.stroke()
            context.beginPath()
            context.moveTo(1024,500)
            context.lineTo(514,1024)
            context.lineTo(1024,1024)
            context.fillStyle = "rgb(143,62,94)"
            context.fill()
            context.closePath()
            context.stroke()
            context.beginPath()
            context.moveTo(0,1024)
            context.lineTo(250,774)
            context.lineTo(520,1024)
            context.fillStyle = "rgba(195,20,201,0.82)"
            context.fill()
            context.closePath()
            context.stroke()
            context.beginPath()
            context.moveTo(250,774)
            context.lineTo(520,1024)
            context.lineTo(724,810)
            context.lineTo(724,724)
            context.lineTo(512,512)
            context.fillStyle = "rgba(20,201,195,0.82)"
            context.fill()
            context.closePath()
            context.stroke()
        }
        else {
            alert("當前瀏覽器不支援canvas,請更換瀏覽器再試")
        }
    }
</script>
</body>
</html>

相關文章