欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2016年02月18日 08:58:49   作者：The-duke  
這篇文章主要介紹了JavaScript+canvas實現(xiàn)七色板效果的方法,結(jié)合實例形式詳細分析了JavaScript結(jié)合html5的canvas技術實現(xià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();
    }
}

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

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

相關文章

  • axios的get請求傳入數(shù)組參數(shù)原理詳解

    axios的get請求傳入數(shù)組參數(shù)原理詳解

    這篇文章主要為大家介紹了axios的get請求傳入數(shù)組參數(shù)原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2023-06-06
  • 詳解JS同源策略和CSRF

    詳解JS同源策略和CSRF

    這篇文章主要介紹了JS同源策略和CSRF，對跨站跨域感興趣的同學，可以看一下
    2021-05-05
  • JavaScript獲取頁面上某個元素的代碼

    JavaScript獲取頁面上某個元素的代碼

    大多數(shù)的javascript操作都需要獲取先獲取頁面上的某個元素，引用其為當前腳本中的一個對象，然后加以操作或獲取節(jié)點樹形。
    2011-03-03
  • 微信小程序去除左上角返回鍵的實現(xiàn)方法

    微信小程序去除左上角返回鍵的實現(xiàn)方法

    這篇文章主要介紹了微信小程序去除左上角返回鍵的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2020-03-03
  • js滾輪事件 js自定義滾動條的實現(xiàn)

    js滾輪事件 js自定義滾動條的實現(xiàn)

    這篇文章主要為大家詳細介紹了js滾輪事件，自定義滾動條的實現(xiàn)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-01-01
  • Javascript異步編程模型Promise模式詳細介紹

    Javascript異步編程模型Promise模式詳細介紹

    異步模式在 Web 編程中變得越來越重要，如何處理異步請求后的操作是一件麻煩事。Promise 是一種異步編程模型，術語稱作 Deferred 模式，它通過一組API來規(guī)范化異步操作，讓異步操作的流程控制更加容易。
    2014-05-05
  • IScroll5實現(xiàn)下拉刷新上拉加載的功能實例

    IScroll5實現(xiàn)下拉刷新上拉加載的功能實例

    本篇文章主要介紹了IScroll5實現(xiàn)下拉刷新上拉加載的功能實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08
  • 判斷js數(shù)據(jù)類型的函數(shù)實例詳解

    判斷js數(shù)據(jù)類型的函數(shù)實例詳解

    這篇文章主要介紹了一個判斷js數(shù)據(jù)類型的函數(shù)，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
    2019-05-05
  • 微信小程序?qū)崿F(xiàn)可長按移動控件

    微信小程序?qū)崿F(xiàn)可長按移動控件

    這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)可長按移動控件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-10-10
  • 微信小程序點擊生成朋友圈分享圖(遇到的坑)

    微信小程序點擊生成朋友圈分享圖(遇到的坑)

    這篇文章主要介紹了微信小程序 點擊生成朋友圈分享圖,本文給大家分享小編在實現(xiàn)此功能時遇到的各種坑，通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2020-06-06

最新評論