JavaScript+canvas实现七色板效果实例
2016-02-18 00:00
811 查看
本文实例讲述了JavaScript+canvas实现七色板效果。分享给大家供大家参考,具体如下:
效果图如下:
html:
css:
javascript:
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript动画特效与技巧汇总》、《JavaScript扩展技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript数学运算用法总结》及《javascript面向对象入门教程》
希望本文所述对大家JavaScript程序设计有所帮助。
js+canvas绘制矩形的方法
js+canvas简单绘制圆圈的方法
js+canvas绘制五角星的方法
JavaScript+html5 canvas***的圆中圆效果实例
JavaScript+html5 canvas绘制的小人效果
JavaScript+html5 canvas***色彩斑斓的正方形效果
JavaScript html5 canvas画布中删除一个块区域的方法
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
JavaScript+html5 canvas***的百花齐放效果完整实例
JavaScript+html5 canvas绘制渐变区域完整实例
JavaScript+html5 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扩展技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript数学运算用法总结》及《javascript面向对象入门教程》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
JavaScript+html5 canvas实现本地截图教程js+canvas绘制矩形的方法
js+canvas简单绘制圆圈的方法
js+canvas绘制五角星的方法
JavaScript+html5 canvas***的圆中圆效果实例
JavaScript+html5 canvas绘制的小人效果
JavaScript+html5 canvas***色彩斑斓的正方形效果
JavaScript html5 canvas画布中删除一个块区域的方法
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
JavaScript+html5 canvas***的百花齐放效果完整实例
JavaScript+html5 canvas绘制渐变区域完整实例
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
相关文章推荐
- XML、HTML、CSS与JS的区别整理
- js实现简单的省市县三级联动效果实例
- Js实现简单的小球运动特效
- JS实现1000以内被3或5整除的数字之和
- ( 译、持续更新 ) JavaScript 上分小技巧(四)
- JS 中给按钮动态添加触发事件
- Grunt配置之 -- JSHint插件安装和配置
- 解决iscroll.js上拉下拉刷新手指划出屏幕页面无法回弹问题
- 【JavaScript】JS读取XML文件并进行搜索
- XSS中JavaScript加密以及Filter bypass
- html锚点的作用和js选项卡锚点跳转的使用
- 利用js参数,保持客户端文件的新鲜度
- JSP 的“4379”
- 自学javascript笔记_自用_解析W3school的代码
- 第2章{ 2-14 [选学]读懂bee的gulpfile.js }
- 第2章{ 2-13 使用抓包工具线上调试 }
- 第2章{ 2-12 使用gulp构建kissy工程 }
- 第2章{ 2-10 使用依赖表控制combo }
- js模拟Ctrl+C复制、Ctrl+V粘贴功能之tabindex、focus、keyCode
- 第2章{ 2-9 别名机制 }