使用canvas绘制6X6调色盘
<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调色盘的更多相关文章
- WPF绘制圆形调色盘
本文使用writeableBitmap类和HSB.RGB模式来绘制圆形的调色盘. 开源项目地址:https://github.com/ZhiminWei/Palette RGB为可见光波段三个颜色通道 ...
- 调色盘canvas
//调色盘 function draw8(id){ var canvas = document.getElementById(id); var context = canvas.getContext( ...
- 关于canvas绘制大转盘并旋转
O(∩_∩)O包子不才,最近磕磕巴巴写了一个大转盘的效果.现在想说一下整个的思路部分,要是有设么不对的还请多多指教,期待共同成为优秀的前端~~大转盘整个思路: 绘制整个转盘 编写一个随机数,用来当接口 ...
- Canvas学习:封装Canvas绘制基本图形API
Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习 从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方 ...
- HTML5学习总结——canvas绘制象棋(canvas绘图)
一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...
- 用canvas绘制折线图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 封装 用canvas绘制直线的函数--面向对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 学习笔记:HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
- canvas绘制经典折线图(一)
最终效果图如下: 实现步骤如下:注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head&g ...
随机推荐
- Codeforces Round #556 CF1149D Abandoning Roads
这道题并不简单,要得出几个结论之后才可以做.首先就是根据Kruskal求最小生成树的过程,短边是首选的,那么对于这道题也是,我们先做一次直选短边的最小生成树这样会形成多个联通块,这些联通块内部由短边相 ...
- div::before一个能插入元素的选择器
div::before一个能插入元素的选择器
- spring framework三个版本的下载包区别
docs:该文件夹下包含Spring的相关文档.开发指南及API参考文档:dist:该文件夹下包含Spring jar包.文档.项目等内容:schema:里面包含了Spring4所用到的xsd文件:
- Qt:代码里存在中文时带来的问题
一.报错: 常量中有换行符 方法1: 把文本文件转化为unicode或者utf-8, 同是还要带上QString::fromLocal8Bit() 还有其他方法,感觉不靠谱 二.显示异常:乱码 QSt ...
- MyBatis 传递多个参数的几种方法
简介: MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集.MyBatis 可以使用简 ...
- 08-02-loggin-模块
程序员看的格式 standard_format = '[%(asctime)s][%(threadName)s:%(thread)d][task_id:%(name)s][%(filename)s:% ...
- 命令行窗口编译执行java
1:首先配置java环境变量 新建系统环境变量 名称:JAVA_HOME 内容:D:\Program Files\Java\jdk1.7.0_13 为你jdk所在的文件夹位置 修改path路径 ...
- OpenGL Download
{ https://www.opengl.org/ }
- VC 串口通讯基本原理,讲的很是详细
目 录打开串口............................................................................................. ...
- Android中的gen文件为空或者不存在的处理方法
Android中的gen文件时链接程序和XML中资源定义的桥梁,所以如果gen文件夹为空可能有以下的几个原因: 1.XML文件错误,这时可以检查res文件夹中的文件是否有错误 2.导入新的Androi ...