<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. Linux防火墙设置——iptables

    防火墙用于监控往来流量,并根据用户定义的规则来过滤数据包以保证安全.iptables是Linux下设置防火墙规则的常用工具,它可以让你设置.维护以及查看防火墙的规则表.你可以定义多个表,每个表可以包含 ...

  2. vue生命周期-标注

    作者:FlyDragon 出处:http://www.cnblogs.com/fly_dragon/ 关于作者:专注于微软平台项目架构.管理和企业解决方案.如有问题或建议,请多多赐教! 本文版权归作者 ...

  3. Dubbo---注册中心

    1.Multicast 注册中心 1.1 Multicast 注册中心   不需要启动  任何中心节点,只要广播地址一样,就可以互相发现. 1.2 1.3 配置   2.zookeeper 注册中心( ...

  4. Kylin-2.6.2集群部署

    1. 集群节点规划与说明 rzx1 all rzx2 query rzx3 query 说明: Kylin节点角色有三种: all: 包含query和job query: 查询节点 job: 工作节点 ...

  5. C/C++ fgets

    {     str_normalize_init();    unsigned options = SNO_TO_LOWER | SNO_TO_HALF;    if (argc > 1)    ...

  6. Yii2 自定义组件

    basic\components\HelloWidget namespace app\components; use yii\base\Widget; use yii\helpers\Html; cl ...

  7. Android中对应用程序的行为拦截实现方式概要

    这次是真的好长时间都没有写博客了,主要不是因为工作上的事,主要还是这个问题真的有点复杂,实现起来有点麻烦,所以研究了很长时间(大约有一个月的时间).但是幸好最后问题搞定了~~ 一.问题场景 想实现36 ...

  8. DUBBO+Zookeeper在Centos7中本地搭建及小案例

    环境: 1.centos7 2.jdk-7u76-linux-x64.tar.gz 2.tomcat:apache-tomcat-7.0.59.tar.gz 3.zookeeper-3.4.6.tar ...

  9. (转)OpenFire源码学习之八:MUC用户聊天室

    转:http://blog.csdn.net/huwenfeng_2011/article/details/43413817 MUC 房间属性设置 以上属性存储在MUCPersistenceManag ...

  10. selenium工作的大概原理

    selenium的原理是什么? selenium的原理涉及到3个部分,分别是 浏览器 driver: 一般我们都会下载driver client: 也就是我们写的代码 client其实并不知道浏览器是 ...