這篇文章主要介紹了JavaScript+canvas實(shí)現(xiàn)七色板效果的方法,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript結(jié)合html5的canvas技術(shù)實(shí)現(xiàn)繪制七色板效果的相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了JavaScript+canvas實(shí)現(xiàn)七色板效果。分享給大家供大家參考，具體如下：

效果圖如下：

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();
    }
}

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript擴(kuò)展技巧總結(jié)》、《JavaScript運(yùn)動(dòng)效果與技巧匯總》、《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》及《javascript面向?qū)ο笕腴T教程》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

axios的get請(qǐng)求傳入數(shù)組參數(shù)原理詳解
這篇文章主要為大家介紹了axios的get請(qǐng)求傳入數(shù)組參數(shù)原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-06-06
詳解JS同源策略和CSRF
這篇文章主要介紹了JS同源策略和CSRF，對(duì)跨站跨域感興趣的同學(xué)，可以看一下
2021-05-05
JavaScript獲取頁(yè)面上某個(gè)元素的代碼
大多數(shù)的javascript操作都需要獲取先獲取頁(yè)面上的某個(gè)元素，引用其為當(dāng)前腳本中的一個(gè)對(duì)象，然后加以操作或獲取節(jié)點(diǎn)樹(shù)形。
2011-03-03
微信小程序去除左上角返回鍵的實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序去除左上角返回鍵的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-03-03
js滾輪事件 js自定義滾動(dòng)條的實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了js滾輪事件，自定義滾動(dòng)條的實(shí)現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-01-01
Javascript異步編程模型Promise模式詳細(xì)介紹
異步模式在 Web 編程中變得越來(lái)越重要，如何處理異步請(qǐng)求后的操作是一件麻煩事。Promise 是一種異步編程模型，術(shù)語(yǔ)稱作 Deferred 模式，它通過(guò)一組API來(lái)規(guī)范化異步操作，讓異步操作的流程控制更加容易。
2014-05-05
IScroll5實(shí)現(xiàn)下拉刷新上拉加載的功能實(shí)例
本篇文章主要介紹了IScroll5實(shí)現(xiàn)下拉刷新上拉加載的功能實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08
判斷js數(shù)據(jù)類型的函數(shù)實(shí)例詳解
這篇文章主要介紹了一個(gè)判斷js數(shù)據(jù)類型的函數(shù)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-05-05
微信小程序?qū)崿F(xiàn)可長(zhǎng)按移動(dòng)控件
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)可長(zhǎng)按移動(dòng)控件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-10-10
微信小程序點(diǎn)擊生成朋友圈分享圖(遇到的坑)
這篇文章主要介紹了微信小程序點(diǎn)擊生成朋友圈分享圖,本文給大家分享小編在實(shí)現(xiàn)此功能時(shí)遇到的各種坑，通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-06-06