JavaScript+canvas实现七色板效果实例
作者:The-duke 发布时间:2023-08-09 09:48:10
标签: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程序设计有所帮助。
0
投稿
猜你喜欢
- Blog的全名应该是Web log,中文意思是“网络日志”,后来缩写为Blog,而博客(Blogger)就是写Blog的人。从理解上讲,博客
- 代码和说明如下:<%Const ForReading = 1 &nbs
- 作为设计师,我们都知道,一个极简的设计可以实现漂亮的效果。然而,很多设计师在实现上有些麻烦:要么是没有时间让使用如此少的元素制作的页面看起来
- 【简 介】熟悉网页设计的网友就知道,调用Style的方法很多,我们可以单击鼠标右键选择Custon Style来调用Style标准,也可以在
- 近来,随着XHTML(可扩展HTML)标准的出现,<script/>标签也经历了一些改变。该标签不再用language特性,而用
- 然而,微软sql server在处理这类索引时,有个重要的缺陷,那就是把本该编译成索引seek的操作编成了索引扫描,这可能导致严重性能下降
- 我们的每期话题,团队在内部都会通过邮件进行一番讨论,随着讨论的激烈,往往能碰撞出很多有意义的观点,因此,将讨论内容分享出来,有兴趣的朋友可以
- 1.delete不能使自动编号返回为起始值。但是truncate能使自动增长的列的值返回为默认的种子 2.truncate只能一次清空,不能
- 在防止sql注入这些细节出现问题的一般是那些大意的程序员或者是新手程序员,他们由于没有对用户提交过来的数据进行一些必要的过滤,从而导致了给大
- 我们首先来看下实例代码:function sig_handler($sig){ print("handled sig:
- 在asp中获取当前的地址栏网址很简单,使用下面这句语句即能实现获取网站域名Request.ServerVariables("HTT
- 首先感谢比尔、感谢微软、感谢MSDN,是他们让我看到他们富有创意的一面,好了好了不废话了。我们经常把多个CSS或者多个JS并成一个,以节省请
- 如何在线更改密码?<%id = Request("id")newpassword =
- Macromedia官方将在其他软件中内建Fireworks技术称为Fireworks技术,网上也称之为内建图片编辑器。Dreamweave
- 看书笔记db file scattered read DB ,db file sequential read DB,free buffer
- 对象:是抽象的概念 如列表 元组 字典 集合 皆为对象序列化:一种方法。目的:把对象存储在磁盘上(即,将对象转换为字节数据/字符数据)。这一
- 在IE浏览器调试代码,我们可以选择使用 IE WebDeveloper但是我个人用惯了ff浏览器下的firebug,所以在网上搜了一下,如果
- 数据库连接:<% set conn=server.createobject("adodb.connection&q
- 在服务器上生成动态内容是使用ASP最主要的原因之一,所以我们选择的第一个测试项目是确定把动态内容发送到应答流使用什么方法最好。基本的选择有两
- 到目前为止,我已经开发了两个HTML编辑器了,一个用在公司的CMS项目,另一个用在这个Blog(TidyEditor,暂时没有单独发布)。下