<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调色盘的更多相关文章

  1. WPF绘制圆形调色盘

    本文使用writeableBitmap类和HSB.RGB模式来绘制圆形的调色盘. 开源项目地址:https://github.com/ZhiminWei/Palette RGB为可见光波段三个颜色通道 ...

  2. 调色盘canvas

    //调色盘 function draw8(id){ var canvas = document.getElementById(id); var context = canvas.getContext( ...

  3. 关于canvas绘制大转盘并旋转

    O(∩_∩)O包子不才,最近磕磕巴巴写了一个大转盘的效果.现在想说一下整个的思路部分,要是有设么不对的还请多多指教,期待共同成为优秀的前端~~大转盘整个思路: 绘制整个转盘 编写一个随机数,用来当接口 ...

  4. Canvas学习:封装Canvas绘制基本图形API

    Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习   从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方 ...

  5. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  6. 用canvas绘制折线图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 封装 用canvas绘制直线的函数--面向对象

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 学习笔记:HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  9. canvas绘制经典折线图(一)

    最终效果图如下: 实现步骤如下:注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head&g ...

随机推荐

  1. mysql binlog相关

    1.清除的binlog   删除所有binlog日志,新日志编号从头开始 RESET MASTER;   删除mysql-bin.XXXX之前所有日志 PURGE MASTER LOGS TO 'my ...

  2. shell script test指令的测试功能 &和&&,|和|| 区别 变量名赋值=号前后的空格问题(天坑)

    小程序告一段落,达到阶段性目标.下一步继续Linux的学习....脑子不够用啊...真费... 书中介绍..检测系统某些文件或者相关属性时,用test指令.. 例如.测试某个文档目录是否存在可以  t ...

  3. 编写Android.mk中的LOCAL_SRC_FILES的终极技巧(转)

    转自:http://blog.csdn.net/fu_zk/article/details/12836431 问题的引入 在使用NDK编译C/C++项目的过程中,免不了要编写Android.mk文件, ...

  4. Fatal error compiling: invalid target release: 11 -> [Help 1]

    <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compi ...

  5. CSIC_716_20191213【内置函数exec、元类】

    In memory of the more than 300 thousand Chinese murdered exec( 字符类型的代码,全局变量,局部变量 ).其中,全局变量和局部变量可以写成字 ...

  6. Buffering Data

    We keep telling you that you always need to close your files after you're done writing to them. Here ...

  7. leetcode-161周赛-5248-统计【优美子数组】

    题目描述: 自己的提交:超时: class Solution: def numberOfSubarrays(self, nums, k: int) -> int: dp = [0]* (len( ...

  8. A*启发式搜索基础

    A*启发式搜索基础 传统的搜索方式是盲目搜索,即到每一步的时候并没有对每种情况进行有效的区分,这样的结果是浪费了大量的时间,对很多没有必要的数据进行了搜索. 而A*算法则在搜索的过程中会选取认为“最优 ...

  9. sublime text3 nodejs控制台输出结果中文乱码

    在sublime text3安装完nodejs的插件后,运行console.log("你好"),发现控制台出现中文乱码,解决办法:Preferences-> Browser ...

  10. openSSL实现AES加密

    Openssl是很常见的C接口的库,个人觉得易用.以下是AES加密的使用备忘.如果你有一定的密码学基础,那么就很好理解.代码是从网上弄下来的(原始地址已经忘记了),然后在尝试的过程中改了一点东西.其它 ...