这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JavaScript+canvas 实现七色板效果的方法, 结合实例形式详细分析了 JavaScript 结合 html5 的 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 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0411/267095.html