JavaScript+canvas实现七色板效果实例


Posted in Javascript onFebruary 18, 2016

本文实例讲述了JavaScript+canvas实现七色板效果。分享给大家供大家参考,具体如下:

效果图如下:

JavaScript+canvas实现七色板效果实例

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程序设计有所帮助。

Javascript 相关文章推荐
juqery 学习之五 文档处理 插入
Feb 11 Javascript
JavaScript学习笔记(二) js对象
Oct 25 Javascript
jQuery 回车事件enter使用示例
Feb 18 Javascript
JavaScript运算符小结
Jun 03 Javascript
JavaScript实现斗地主游戏的思路
Feb 29 Javascript
深入理解jquery中的事件与动画
May 24 Javascript
JS填写银行卡号每隔4位数字加一个空格
Dec 19 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
Dec 28 Javascript
vue插件vue-resource的使用笔记(小结)
Aug 04 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 Javascript
PostgreSQL Node.js实现函数计算方法示例
Feb 12 Javascript
vue路由守卫,限制前端页面访问权限的例子
Nov 11 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
Feb 18 #Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
Feb 18 #Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
Feb 18 #Javascript
javascript每日必学之条件分支
Feb 17 #Javascript
JavaScipt中栈的实现方法
Feb 17 #Javascript
Bootstrap入门书籍之(五)导航条、分页导航
Feb 17 #Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
Feb 17 #Javascript
You might like
一个简单的php实现的MySQL数据浏览器
2007/03/11 PHP
file_get_contents获取不到网页内容的解决方法
2013/03/07 PHP
php+mysql实现用户注册登陆的方法
2015/01/03 PHP
Symfony实现行为和模板中取得request参数的方法
2016/03/17 PHP
php微信开发之自定义菜单实现
2016/11/18 PHP
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
replace()方法查找字符使用示例
2013/10/28 Javascript
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
输入框过滤非数字的js代码
2014/09/18 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
2015/02/27 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
2015/03/04 Javascript
javascript实现点击提交按钮后显示loading的方法
2015/07/03 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
Bootstrap源码学习笔记之bootstrap进度条
2016/12/24 Javascript
基于JavaScript实现无缝滚动效果
2017/07/21 Javascript
AngularJS ionic手势事件的使用总结
2017/08/09 Javascript
javascript使用正则实现去掉字符串前面的所有0
2018/07/23 Javascript
深入理解react-router 路由的实现原理
2018/09/26 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
Vuex的实战使用详解
2019/10/31 Javascript
小程序跳转H5页面的方法步骤
2020/03/06 Javascript
二种python发送邮件实例讲解(python发邮件附件可以使用email模块实现)
2013/12/03 Python
理解Python垃圾回收机制
2016/02/12 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
pytorch中的自定义数据处理详解
2020/01/06 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
python如何写个俄罗斯方块
2020/11/06 Python
C#实现对任一张表的数据进行增,删,改,查要求,运用Webservice,体现出三层架构
2014/07/11 面试题
传统软件工程与面向对象的软件工程有什么区别
2012/05/31 面试题
通信工程毕业生求职信
2013/11/16 职场文书
写演讲稿要注意的六件事
2014/01/14 职场文书
高中生评语大全
2014/04/25 职场文书
祖国在我心中演讲稿500字
2014/05/04 职场文书
环保项目建议书
2014/08/26 职场文书
大学学生会竞选稿
2015/11/19 职场文书
python中os.path.join()函数实例用法
2021/05/26 Python