HTML5填充颜色的fillStyle测试

效果:http://hovertree.com/texiao/html5/canvas/1/代码:123415测试fillStyle-何问起16171819202122何

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

HTML5填充颜色的fillStyle测试此处内容已经被作者隐藏,请输入验证码查看内容
验证码:
请关注本站微信公众号,回复“”,获取验证码。在微信里搜索“”或者“”或者微信扫描右侧二维码都可以关注本站微信公众号。

效果:
http://hovertree.com/texiao/html5/canvas/1/

代码:

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html;charset=gbk" /> 
 4 <script type="text/javascript">
 5 function draw(){
 6 var ctx = document.getElementById('canvas').getContext('2d');
 7 for (var i=0;i<6;i++){ 
 8 for (var j=0;j<6;j++){ 
 9 ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +Math.floor(255-42.5*j) + ',0)';
10 ctx.fillRect(j*25,i*25,25,25);
11 }
12 }
13 }
14 </script>
15 <title>测试fillStyle - 何问起</title>
16  <meta name="description" content="何问起,hovertree.com" /><meta name="keywords" content=" hovertree.com,何问起" />
17 
18 </head>
19 <body onload="draw();" > 
20 <canvas id="canvas" width="400" height="300">
21 </canvas>
22 <a href="http://hovertree.com/h/bjaf/a064shrh.htm">何问起</a>
23 </body>
24 </html>

更多:http://www.cnblogs.com/roucheng/p/texiao.html

http://hovertree.com/texiao/html5/canvas/2/

如果我们想要给图形上色,有两个重要的属性可以做到:fillStyle 和 strokeStyle。

fillStyle = color
strokeStyle = color

strokeStyle 是用于设置图形轮廓的颜色,而 fillStyle 用于设置填充颜色。color 可以是表示 CSS 颜色值的字符串,渐变对象或者图案对象。默认情况下,线条和填充颜色都是黑色(CSS 颜色值 #000000)。

下面的例子都表示同一种颜色。
// 这些 fillStyle 的值均为 ‘橙色’
ctx.fillStyle = “orange”; 
ctx.fillStyle = “#FFA500”;
ctx.fillStyle = “rgb(255,165,0)”;
ctx.fillStyle = “rgba(255,165,0,1)”;

注意: 目前 Gecko 引擎并没有提供对所有的 CSS 3 颜色值的支持。例如,hsl(100%,25%,0) 或者 rgb(0,100%,0) 都不可用。

注意: 一旦您设置了 strokeStyle 或者 fillStyle 的值,那么这个新值就会成为新绘制的图形的默认值。如果你要给每个图形上不同的颜色,你需要重新设置 fillStyle 或 strokeStyle 的值。

http://hovertree.com/texiao/html5/canvas/3/

Canvas填充样式fillStyle
说明
在本示例里,我会再度用两层for循环来绘制方格阵列,每个方格不同的颜色。结果如图,但实现所用的代码却没那么绚丽。我用了两个变量i和j 为每一个方格产生唯一的RGB色彩值,其中仅修改红色和绿色通道的值,而保持蓝色通道的值不变。你可以通过修改这些颜色通道的值来产生各种各样的色板。通过增加渐变的频率,你还可以绘制出类似 Photoshop 里面的那样的调色板。

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/120675.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • vip导致的serverConnection closed by foreign host问题

    vip导致的serverConnection closed by foreign host问题问题描述:应应用需求,设计搭建了一套带tokudb存储引擎的percona数据库,使用的是常见的双主架构。具体的架构如下图所示:在172.20.32.x1上进行验证的时候出现了下面的问题:FHo

  • 分子生物学数据库综合目录「建议收藏」

    分子生物学数据库综合目录「建议收藏」SRS序列查询系统http://www.embl-heidelberg.de/srs5/分子生物学数据库及服务器概览http://www.ai.sri.com/people/pkarp/mimbd/rsmith.htmlBioMedNet图书馆http://biomednet.comDBGET数据库链接http://www.genome.ad.jp/dbg

  • 秒秒钟解决打开ps图片显示无法完成请求,因为程序错误「建议收藏」

    秒秒钟解决打开ps图片显示无法完成请求,因为程序错误「建议收藏」问题描述今天在做ps作业的时候做到一半,保存的时候卡了一下,我等了一会,不卡了,我以为我保存了就没什么事了,然后就关闭ps,软件关闭的时候也卡了一下,结果现在想接着做的时候打不开了,做了那么久那么多图层都在,我心态直接崩了,白做了。当我赶紧上网查怎么修复和解决。全特码是p话,一个有用的都没有,说什么右键ps属性,兼容性的运行,管理员打开,设置好后就可以直接打开了,我特么又不是兼容性的问题,之前一直用的好好的,还有打开ps清理暂存盘,缓存大小改大,我。。。。。。呵呵。还有说检查ps是否更新了,说什么确保系.

  • 小试 ScriptManager

    小试 ScriptManager1概述ScriptManager控件管理用于MicrosoftASP.NETAJAX页面的客户端脚本。默认情况下,ScriptManager控件将MicrosoftAJAX库的脚本与页面注册到一起,这使脚本可以使用类型系统扩展并支持局部页面输出和Web服务调用。在页面中,必须使用ScriptManager控件来使下列MicrosoftASP.NETAJAX…

  • Java分布式应用技术架构介绍

    Java分布式应用技术架构介绍分布式架构的演进系统架构演化历程-初始阶段架构初始阶段的小型系统应用程序、数据库、文件等所有的资源都在一台服务器上通俗称为LAMP特征:应用程序、数据库、文件等所有的资源都在一台服务器上。描述:通常服务器操作系统使用linux,应用程序使用PHP开发,然后部署在Apache上,数据库使用Mysql,汇集各种免费开源软件以及一台廉价服务器就可以开始系统

  • 使用panel1,切换页面

    使用panel1,切换页面定义变量UserControl1urs1_Control;UserControl2urs2_Control;UserControl3urs3_Control;UserControl4u

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号