<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常用命令 cat命令

    在Linux系统中,cat命令是一个文本输出命令,通常用来查看某个文档的内容.它有如下三个功能: 1.一次性显示整个文件 如:查看/etc/initab文件,可以使用命令:cat/etc/initta ...

  2. H5新属性 contenteditable

    contenteditable 属性规定元素内容是否可编辑 <div contenteditable style="width: 100px;height:100px"> ...

  3. Unity 调用jar闪退 解决方案

    { https://www.cnblogs.com/YZFHKMS-X/p/11864496.html }

  4. 思维+贪心——cf1042D

    /* 首先考虑从后往前计算lis,显然0的在很多情况下的贡献要大于1 如果遇上0,那么lis++,如果遇上1,那么cnt1++,并且用cnt1更新lis 这样的贪心保证正确,因为从[i,j]这一段的l ...

  5. spring boot基于DRUID数据源密码加密及数据源监控实现

    前言 随着需求和技术的日益革新,spring boot框架是越来越流行,她也越来越多地出现在我们的项目中,当然最主要的原因还是因为spring boot构建项目实在是太爽了,构建方便,开发简单,而且效 ...

  6. BZOJ 1565: [NOI2009]植物大战僵尸(网络流+缩点)

    传送门 解题思路 最大权闭合子图.但是要注意一些细节,假如有一堆植物形成一个环,那么这些植物都是无敌的,并且他们保护的植物是无敌的,他们保护的保护的植物是无敌 的.所以要缩点,然后拓扑排序一次判无敌, ...

  7. (转)Linux C 多线程编程----互斥锁与条件变量

    转:http://blog.csdn.net/xing_hao/article/details/6626223 一.互斥锁 互斥量从本质上说就是一把锁, 提供对共享资源的保护访问. 1. 初始化: 在 ...

  8. 寻找cookie之旅

    公司接口自动化,需要用到cookie.这个cookie可以从login的响应header中取到. 直接用python调这个接口,返回的响应header是这个: {'Date': 'Thu, 15 Au ...

  9. 20140719 找到单链表的倒数第K个节点 判断一个链表是否成为一个环形 反转

    1.找到单链表的倒数第K个节点 2.判断一个单链表对否形成环形 3.单链表翻转

  10. java实现后台自动发邮件功能

    web.xml文件 <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE web-app PUBLI ...