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 相关文章推荐
JavaScript DOM学习第六章 表单实例
Feb 19 Javascript
Pro JavaScript Techniques学习笔记
Dec 28 Javascript
JS 实现Json查询的方法实例
Apr 12 Javascript
html页面显示年月日时分秒和星期几的两种方式
Aug 20 Javascript
javascript模拟订火车票和退票示例
Apr 24 Javascript
谷歌Chrome浏览器扩展程序开发小记
Jan 06 Javascript
javascript回到顶部特效
Jul 30 Javascript
简单谈谈ES6的六个小特性
Nov 18 Javascript
简易Vue评论框架的实现(父组件的实现)
Jan 08 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
Dec 10 Javascript
详解async/await 异步应用的常用场景
May 13 Javascript
vue实现自定义H5视频播放器的方法步骤
Jul 01 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
ThinkPHP实现支付宝接口功能实例
2014/12/02 PHP
typecho插件编写教程(四):插件挂载
2015/05/28 PHP
php使用json_decode后数字对象转换成了科学计数法的解决方法
2017/02/20 PHP
简单实现php上传文件功能
2017/09/21 PHP
JavaScript中“+=”的应用
2007/02/02 Javascript
javascript add event remove event
2008/04/07 Javascript
Mootools 1.2教程 同时进行多个形变动画
2009/09/15 Javascript
基于jQuery的前端数据通用验证库
2011/08/08 Javascript
JQuery学习笔录 简单的JQuery
2012/04/09 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
2012/05/24 Javascript
用js实现小球的自由移动代码
2013/04/22 Javascript
SOSO地图JS画出标注和中心点以html形式运行
2013/08/09 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
2013/12/14 Javascript
抛弃Nginx使用nodejs做反向代理服务器
2014/07/17 NodeJs
js结合正则实现国内手机号段校验
2015/06/19 Javascript
jQuery实现布局高宽自适应的简单实例
2016/05/28 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
Webpack性能优化 DLL 用法详解
2017/08/10 Javascript
Python中使用MELIAE分析程序内存占用实例
2015/02/18 Python
python中字符串前面加r的作用
2015/06/04 Python
常用python编程模板汇总
2016/02/12 Python
Python Dataframe 指定多列去重、求差集的方法
2018/07/10 Python
pygame游戏之旅 如何制作游戏障碍
2018/11/20 Python
python+opencv实现阈值分割
2018/12/26 Python
TensorFlow tf.nn.conv2d实现卷积的方式
2020/01/03 Python
jupyter 中文乱码设置编码格式 避免控制台输出的解决
2020/04/20 Python
Python+OpenCV图像处理——图像二值化的实现
2020/10/24 Python
YSL圣罗兰美妆官方旗舰店:购买YSL口红
2018/04/16 全球购物
婴儿地球:Baby Earth
2018/12/25 全球购物
Dodax奥地利:音乐、电影、书籍、玩具、电子产品等
2019/08/31 全球购物
大学生实习自我鉴定
2013/12/11 职场文书
财务总监岗位职责范本
2015/04/03 职场文书
2015年音乐教学工作总结
2015/07/22 职场文书
社区结对共建协议书
2016/03/23 职场文书
python scipy 稀疏矩阵的使用说明
2021/05/26 Python
Flask response响应的具体使用
2021/07/15 Python