<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. jeesite框架常用插件

    1.分页: <div class="pagination">${page }</div> 2.日历:onclick="WdatePicker({d ...

  2. windows10自带的画图软件打出来的字是斜的,怎么解决?

    因为字体中带@的字体,方向就是斜的,所以打字时不要用前面带@符号的字体. 用其他字体方向为正常的

  3. Java——异常的基本概念

    1.异常的基本概念 1.1什么是异常 在使用计算机语言进行项目开发的过程中,即使程序员把代码写得尽善尽美,在系统的运行过程中仍然会遇到一些问题,因为很多问题不是靠代码能够避免的,比如:客户输入数据的格 ...

  4. bzoj4403题解

    [参考代码] #pragma GCC optimize(2) #include <cstdlib> #define function(type) __attribute__((optimi ...

  5. ROS - 日志

    1.日志级别 日志消息分为五个不同的严重级别宏,与Android的Log定义的严重级别类似,如下基础宏: ROS_DEBUG_STREAM.ROS_INFO_STREAM.ROS_WARN_STREA ...

  6. python:列表、元组和字典

    1.1.特点:   任意对象的有序集合   通过偏移量读取   可变长度,异构以及任意嵌套   属于可变序列的分类   对象引用数组:当把一个对象赋给一个数据结构元素或变量名时,python总会存储对 ...

  7. centos 下安装 shpinx2.1.7 记录

    安装sphinx yum install -y mysql mysql-devel yum install automake autoconf cd /usr/local/src/ wget http ...

  8. centos 安装 ImageMagick

    ImageMagick很好用,shell下可以批量对图片做处理,很赞!~ 编译安装 wget http://www.imagemagick.org/download/ImageMagick.tar.g ...

  9. golang 读取 ini配置信息

      package main //BY: 29295842@qq.com//这个有一定问题   如果配置信息里有中文就不行//[Server] ;MYSQL配置//Server=localhost   ...

  10. dubbo入门学习(一)-----分布式基础理论、架构发展以及rpc、dubbo核心概念

    一.分布式基础理论 1.什么是分布式系统? <分布式系统原理与范型>定义: “分布式系统是若干独立计算机的集合,这些计算机对于用户来说就像单个相关系统” 分布式系统(distributed ...