JavaScript+canvas實現(xiàn)七色板效果實例

更新時間：2016年02月18日 08:58:49 作者：The-duke

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

本文實例講述了JavaScript+canvas實現(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動畫特效與技巧匯總》、《JavaScript擴展技巧總結(jié)》、《JavaScript運動效果與技巧匯總》、《JavaScript數(shù)學運算用法總結(jié)》及《javascript面向?qū)ο笕腴T教程》

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

您可能感興趣的文章:

相關(guān)文章

Textarea與懶惰渲染實現(xiàn)代碼
2008年有啊第一次性能優(yōu)化時，我們曾用textarea來存貯需要懶惰渲染的節(jié)點
2012-01-01
Javascript中Object和Map之間的轉(zhuǎn)換方法
在許多編程語言中,Object和Map都是用于存儲鍵值對的數(shù)據(jù)結(jié)構(gòu),下面這篇文章主要給大家介紹了關(guān)于Javascript中Object和Map之間的轉(zhuǎn)換方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-06-06
前端GET/POST請求下載文件多種方式代碼示例
文件都是通過接口獲取的,前端通過調(diào)用接口將接口返回的文件下載,下面這篇文章主要給大家介紹了關(guān)于前端GET/POST請求下載文件的多種方式,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-06-06
JS實現(xiàn)鍵值對遍歷json數(shù)組功能示例
這篇文章主要介紹了JS實現(xiàn)鍵值對遍歷json數(shù)組功能,結(jié)合實例形式分析了javascript遍歷json數(shù)組相關(guān)操作技巧,需要的朋友可以參考下
2018-05-05
指定區(qū)域的圖片自動按比例縮小的js代碼（防止頁面被圖片撐破）
有時候我們更新的內(nèi)容，有很多的大圖片，就會導致頁面變形或看不到全圖。一般情況我們用css的max-width控制，但有些瀏覽器不支持，我們也可以用js做個補充
2014-02-02
Js+Ajax,Get和Post在使用上的區(qū)別小結(jié)
下面小編就為大家?guī)硪黄狫s+Ajax,Get和Post在使用上的區(qū)別小結(jié)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
bootstrap基本配置_動力節(jié)點Java學院整理
這篇文章主要介紹了bootstrap基本配置，詳細講解如何下載并安裝 Bootstrap，討論 Bootstrap 文件結(jié)構(gòu)，并通過一個實例演示它的用法。
2017-07-07
xmlplus組件設(shè)計系列之下拉刷新（PullRefresh)（6）
xmlplus 是一個JavaScript框架，用于快速開發(fā)前后端項目。這篇文章主要介紹了xmlplus組件設(shè)計系列之下拉刷新，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-05-05
CocosCreator如何實現(xiàn)劃過的位置顯示紋理
這篇文章主要介紹了CocosCreator紋理shader的一些知識，想了解shader的同學，一定要看下，并且親自動手實踐
2021-04-04
JS給swf傳參數(shù)的實現(xiàn)方法
下面小編就為大家?guī)硪黄狫S給swf傳參數(shù)的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-09-09