使用canvas绘制6X6调色盘
<canvas id="canvas" height="150" width="150"></canvas>
var canvas = document.getElementById('canvas') var ctx = canvas.getContext('2d') for (var i = 0; i < 6; i++) {
for (var j = 0; j < 6; j++) {
// 每块填充色
ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * j) + ',' + Math.floor(255 - 42.5 * i) + ', 0)'
// 位置
ctx.fillRect(25 * i, 25 * j, 25, 25) }
}
结果:
使用canvas绘制6X6调色盘的更多相关文章
- WPF绘制圆形调色盘
本文使用writeableBitmap类和HSB.RGB模式来绘制圆形的调色盘. 开源项目地址:https://github.com/ZhiminWei/Palette RGB为可见光波段三个颜色通道 ...
- 调色盘canvas
//调色盘 function draw8(id){ var canvas = document.getElementById(id); var context = canvas.getContext( ...
- 关于canvas绘制大转盘并旋转
O(∩_∩)O包子不才,最近磕磕巴巴写了一个大转盘的效果.现在想说一下整个的思路部分,要是有设么不对的还请多多指教,期待共同成为优秀的前端~~大转盘整个思路: 绘制整个转盘 编写一个随机数,用来当接口 ...
- Canvas学习:封装Canvas绘制基本图形API
Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习 从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方 ...
- HTML5学习总结——canvas绘制象棋(canvas绘图)
一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...
- 用canvas绘制折线图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 封装 用canvas绘制直线的函数--面向对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 学习笔记:HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
- canvas绘制经典折线图(一)
最终效果图如下: 实现步骤如下:注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head&g ...
随机推荐
- mysql binlog相关
1.清除的binlog 删除所有binlog日志,新日志编号从头开始 RESET MASTER; 删除mysql-bin.XXXX之前所有日志 PURGE MASTER LOGS TO 'my ...
- shell script test指令的测试功能 &和&&,|和|| 区别 变量名赋值=号前后的空格问题(天坑)
小程序告一段落,达到阶段性目标.下一步继续Linux的学习....脑子不够用啊...真费... 书中介绍..检测系统某些文件或者相关属性时,用test指令.. 例如.测试某个文档目录是否存在可以 t ...
- 编写Android.mk中的LOCAL_SRC_FILES的终极技巧(转)
转自:http://blog.csdn.net/fu_zk/article/details/12836431 问题的引入 在使用NDK编译C/C++项目的过程中,免不了要编写Android.mk文件, ...
- Fatal error compiling: invalid target release: 11 -> [Help 1]
<plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compi ...
- CSIC_716_20191213【内置函数exec、元类】
In memory of the more than 300 thousand Chinese murdered exec( 字符类型的代码,全局变量,局部变量 ).其中,全局变量和局部变量可以写成字 ...
- Buffering Data
We keep telling you that you always need to close your files after you're done writing to them. Here ...
- leetcode-161周赛-5248-统计【优美子数组】
题目描述: 自己的提交:超时: class Solution: def numberOfSubarrays(self, nums, k: int) -> int: dp = [0]* (len( ...
- A*启发式搜索基础
A*启发式搜索基础 传统的搜索方式是盲目搜索,即到每一步的时候并没有对每种情况进行有效的区分,这样的结果是浪费了大量的时间,对很多没有必要的数据进行了搜索. 而A*算法则在搜索的过程中会选取认为“最优 ...
- sublime text3 nodejs控制台输出结果中文乱码
在sublime text3安装完nodejs的插件后,运行console.log("你好"),发现控制台出现中文乱码,解决办法:Preferences-> Browser ...
- openSSL实现AES加密
Openssl是很常见的C接口的库,个人觉得易用.以下是AES加密的使用备忘.如果你有一定的密码学基础,那么就很好理解.代码是从网上弄下来的(原始地址已经忘记了),然后在尝试的过程中改了一点东西.其它 ...