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)
blank

相关推荐

  • have an insight into(offset)

    对于一个旋转的dom元素,getBoundingClientRect()得到的width,height是外接矩形的宽高,offsetWidthoffsetHeight是未旋转前dom的宽高

  • 香港坚固金业的黑幕,属于非法投资平台。

    2015年4.29晚上凌晨两点半我结束了建仓操作,当时没又发现账户资金问题,后来第二天早晨发现账户被非法操作做单,所有资金信息都被在美国时间22:08开始到22:56仅仅不到一个小时时间,所有资金都频繁建仓平仓操作,导致我账户资金全部亏损。 第二天咨询客服客服回答说是我自己认为操作要么,账户信息被泄露,被他人非法操作了。他们查询说是操作IP地址是外地操作,我感觉到很可悲,

  • 深度学习在图像处理中的应用(tensorflow2.4以及pytorch1.10实现)

    深度学习在图像处理中的应用(tensorflow2.4以及pytorch1.10实现)本人在读研期间的研究方向是图像处理以及深度学习(主要是图像分类和目标检测)。在做深度学习时使用的是tensorflow深度学习框架,学习全是自学,很多资源都是在Github上找的。我发现现在Github上很多深度学习的开源项目都是用的tensorflow和pytorch框架。所以现在也开始学习pytorch框架,之前一直用的是tensorflow1.x版本,今年正好迎来了新的tensorlfow大…

  • 字符串转List<map>「建议收藏」

    字符串转List<map>「建议收藏」List<byte[]>list=newArrayList<>();//近一周水汽热水能Map<String,Object>map=newHashMap<>();map.put(“1”,“A”);map.put(“2”,“B”);map.put(“3”,“C”);Map<String,Object>map2…

  • pycharm怎么装第三方库jieba_pycharm找不到第三方库

    pycharm怎么装第三方库jieba_pycharm找不到第三方库第一种想要安装什么库,就直接cmd打开pipinstall库,这种方法可以的,不过速度会有点慢不过,有时候失败就难受。第二种直接在pycharm中安装如图,不过安装失败的情况比较多(可能是我电脑问题)第三种下载了Anaconda的小伙伴,虽然conda里面含有很多库了,但是还有需要下载的就可以直接打开AnacondaNavigator,在里面进行操作,如图四、上面三种都不行有安装Anaconda的话,直接上网搜索库名加pypi..

  • vue常用命令[通俗易懂]

    vue常用命令[通俗易懂]vue常用命令

发表回复

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

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