使用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 ...
随机推荐
- Linux防火墙设置——iptables
防火墙用于监控往来流量,并根据用户定义的规则来过滤数据包以保证安全.iptables是Linux下设置防火墙规则的常用工具,它可以让你设置.维护以及查看防火墙的规则表.你可以定义多个表,每个表可以包含 ...
- vue生命周期-标注
作者:FlyDragon 出处:http://www.cnblogs.com/fly_dragon/ 关于作者:专注于微软平台项目架构.管理和企业解决方案.如有问题或建议,请多多赐教! 本文版权归作者 ...
- Dubbo---注册中心
1.Multicast 注册中心 1.1 Multicast 注册中心 不需要启动 任何中心节点,只要广播地址一样,就可以互相发现. 1.2 1.3 配置 2.zookeeper 注册中心( ...
- Kylin-2.6.2集群部署
1. 集群节点规划与说明 rzx1 all rzx2 query rzx3 query 说明: Kylin节点角色有三种: all: 包含query和job query: 查询节点 job: 工作节点 ...
- C/C++ fgets
{ str_normalize_init(); unsigned options = SNO_TO_LOWER | SNO_TO_HALF; if (argc > 1) ...
- Yii2 自定义组件
basic\components\HelloWidget namespace app\components; use yii\base\Widget; use yii\helpers\Html; cl ...
- Android中对应用程序的行为拦截实现方式概要
这次是真的好长时间都没有写博客了,主要不是因为工作上的事,主要还是这个问题真的有点复杂,实现起来有点麻烦,所以研究了很长时间(大约有一个月的时间).但是幸好最后问题搞定了~~ 一.问题场景 想实现36 ...
- 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 ...
- (转)OpenFire源码学习之八:MUC用户聊天室
转:http://blog.csdn.net/huwenfeng_2011/article/details/43413817 MUC 房间属性设置 以上属性存储在MUCPersistenceManag ...
- selenium工作的大概原理
selenium的原理是什么? selenium的原理涉及到3个部分,分别是 浏览器 driver: 一般我们都会下载driver client: 也就是我们写的代码 client其实并不知道浏览器是 ...