JavaScript+canvas merealisasikan kemahiran example_javascript kesan papan tujuh warna

Contoh dalam artikel ini menerangkan cara JavaScript+kanvas mencapai kesan papan tujuh warna. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Rendering adalah seperti berikut:

html:

<canvas id="canvas" class="canvas" width="600" height="600"></canvas>

css:

html,body{margin: 0;padding: 0}
.canvas{display: block; margin-left:auto;margin-right:auto;margin-top: 50px;}

javascript:

var disk = [
    {
      area:[{x:0,y:0},{x:600,y:0},{x:300,y:300}],
      color:"#CBF263"
    },
    {
      area:[{x:0,y:0},{x:0,y:600},{x:300,y:300}],
      color:"#5CB6D0"
    },
    {
      area:[{x:0,y:600},{x:300,y:600},{x:150,y:450}],
      color:"#FE9CCD"
    },
    {
      area:[{x:150,y:450},{x:300,y:300},{x:450,y:450},{x:300,y:600}],
      color:"#A696C3"
    },
    {
      area:[{x:300,y:600},{x:600,y:600},{x:600,y:300}],
      color:"#FBC421"
    },
    {
      area:[{x:600,y:300},{x:600,y:0},{x:450,y:150},{x:450,y:450}],
      color:"#FF5061"
    },
    {
      area:[{x:450,y:450},{x:450,y:150},{x:300,y:300}],
      color:"#FDEA11"
    }
]
window.onload = function(){
    var canvasDom = document.getElementById("canvas");
    var ctx = canvasDom.getContext("2d");
    drawDisk(disk,ctx)
}
function drawDisk(disk,ctx){
    for(var i = 0;i<disk.length;i++){
      ctx.beginPath();
      ctx.moveTo(disk[i].area[0].x,disk[i].area[0].y);
      for(var j = 1;j<disk[i]["area"].length;j++){
        ctx.lineTo(disk[i].area[j].x,disk[i].area[j].y);
      }
      ctx.closePath();
      ctx.fillStyle = disk[i]["color"];
      ctx.fill();
    }
}

Pembaca yang berminat dengan lebih banyak kandungan berkaitan JavaScript boleh menyemak topik khas di tapak ini: "Ringkasan kesan dan teknik khas animasi JavaScript", "Ringkasan teknik pengembangan JavaScript", "Ringkasan kesan dan teknik gerakan JavaScript", "Ringkasan penggunaan operasi matematik JavaScript" dan "Tutorial pengenalan berorientasikan objek Javascript"

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan JavaScript.