canvas畫圖簡單版-有解無憂

在這里插入圖片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas畫圖基礎版</title>
    <style>
        #myCanvas {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <canvas id="myCanvas" width="600px" height="600px"></canvas>
</body>
<script>
    var canvas = document.getElementById('myCanvas')
    var ctx = canvas.getContext('2d');

    // 畫個直線
    ctx.beginPath()  //開始路徑
    ctx.moveTo(100, 30)    //開始坐標
    ctx.lineTo(200, 30)    //結束坐標
    // 在著色之前設定顏色和寬度
    ctx.strokeStyle = 'red'  //設定顏色
    ctx.lineWodth = 10   //設定寬度
    ctx.stroke();   //著色
    ctx.closePath()   //結束路徑

    //一個矩形
    ctx.beginPath();
    ctx.rect(100, 200, 100, 100)  //矩形 context.rect(x,y,width,height);
    ctx.fillStyle = '#E9686B'    //定義用什么顏色填充
    ctx.fill()      //填充當前的影像(路徑)
    ctx.closePath()

    //矩形二
    ctx.beginPath();
    ctx.fillRect(100, 350, 100, 100)  //矩形 context.rect(x,y,width,height); 相當于ctx.rect和ctx.fill合并
    ctx.fillStyle = '#E9686B'    //定義用什么顏色填充
    ctx.closePath()

    //漸變的矩形
    ctx.beginPath()
    var grd = ctx.createLinearGradient(100, 50, 50, 170);
    //createLinearGradient() 方法創建線性的漸變物件， context.createLinearGradient(x0,y0,x1,y1);
    grd.addColorStop(0, "black");
    grd.addColorStop(1, "white");
    ctx.fillStyle = grd;
    ctx.fillRect(100, 50, 100, 100);
    ctx.closePath()

    //畫個圓
    ctx.beginPath();
    //context.arc(x(x軸),y(y軸),r(半徑),sAngle(開始角度),eAngle(結束角度),counterclockwise); Math.PI=π
    ctx.arc(400, 100, 50, 0, 2 * Math.PI);
    ctx.fillStyle = 'blue'   //定義用什么顏色填充
    ctx.fill()  //填充當前的影像
    ctx.closePath()   //結束路徑

    //畫個半圓
    ctx.beginPath()
    ctx.arc(400, 300, 50, 0, 1 * Math.PI)
    ctx.fillStyle = 'yellow'
    ctx.strokeStyle = 'red'    //線的填充色
    ctx.fill()
    ctx.stroke()
    ctx.closePath()

    // 橢圓
    ctx.beginPath()
    ctx.ellipse(400, 400, 15, 30, 0, 0, Math.PI * 2);
    // ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)是現在更新的，
    // 引數的意思：(起點x.起點y,半徑x,半徑y,旋轉的角度，起始角，結果角，順時針還是逆時針)
    ctx.fillStyle = 'yellow'
    ctx.strokeStyle = 'red'    //線的填充色
    ctx.fill()
    ctx.stroke()
    ctx.closePath() 
</script>

</html>
這是一個自學筆記
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/301293.html
標籤：其他
上一篇：JavaScript遞回查詢省市區資料
下一篇：使用js基礎實作增刪查改