canvas学习之-七色板
2015-06-05 11:21
211 查看
效果图
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(); } }
相关文章推荐
- 用两个栈实现队列
- uboot流程分析--修改android启动模式按键
- 哈希表
- 面向对象设计的三个基本要素与五个基本设计原则
- jQuery 选择器
- 直接拿来用!最火的Android开源项目(完结篇)
- iOS image生成图片
- 新GRE逻辑阅读作者的观念及文化背景解析
- 七层模型实例解析
- RabbitMQ 消息中间件的部署
- Unity3D摄像机跟随人物
- 【高斯消元】 HDOJ 5257 翻转游戏
- Flume Source--spooldir Sink--file_roll channels--file
- 九度OJ-题目1520:树的子结构
- 学习笔记:架构 移动应用架构 网络层设计方案(三)
- epoll使用具体解释(精髓)
- Codeforces Round #306 (Div. 2)
- 解决jquery-ui-autocomplete选择列表被Bootstrap模态窗遮挡的问题
- 欢迎使用CSDN-markdown编辑器
- 深入讲解WEBVIEW(上)