<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. gradle笔记

    gradle笔记 一.基础知识 1.1.groovy语言 Groovy适用于Java虚拟机的一种敏捷的动态语言,他是一种成熟的面向对象编程语言,既可以用于面向对象编程,又可以用作纯粹的脚本语言,使用该 ...

  2. 笔记60 Spring+Mybatis整合

    整合思路:将SessionFactory交给Spring管理,并且把Mapper和XML结合起来使用. 一.目录结构 二.基本的pojo Category.java package com.pojo; ...

  3. JSP中调用Spring的方法

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  4. element 的时间快捷键

    1. <div> <el-date-picker v-model="value4" type="month" :picker-options= ...

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

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

  6. throws/throw Exception 异常应用

    throws通常用于方法的声明,当方法中发生异常的时候,却不想在方法中对异常进行处理的时候,就可以在声明方法时, 使用throws声明抛出的异常,然后再调用该方法的其他方法中对异常进行处理(如使用tr ...

  7. Scala(一)基础

    OOP 面向对象编程 AOP 面向切面编程 FP 函数式编程 编程语言都要定义变量,一些代码是用来注释的,变量和变量之间有一些关系,要做一些运算,运算离不开流程控制,进行运算的数据往往来自数据结构,最 ...

  8. 关于C#的随机数

    一直都知道random随机数可能出现相同的情况,但是一直没具体看为什么,网上一看又是一大堆例子给你出来,一点也不清晰,今天看msdn记录一下,msdn是讲的真的清楚. 实例化随机数生成器 通过向Ran ...

  9. 【JZOJ6431】【luoguP5658】【CSP-S2019】括号树

    description analysis 用栈维护一下树上路径未匹配的左括号,然后在树上找右括号匹配,设\(f[i]\)为\(i\)节点的贡献,\(g[i]\)是答案 为左括号可以直接继承父节点的信息 ...

  10. Vue学习笔记【21】——Vue中的动画(v-for 的列表过渡)

    定义过渡样式:  <style>    .list-enter,    .list-leave-to {      opacity: 0;      transform: translat ...