使用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 ...
随机推荐
- teb教程3
配置和运行机器人导航 简介:配置teb_local_planner作为navigation中local planner的插件 参考teb安装 由于局部代价地图的大小和分辨率对优化性能影响很大,因为占据 ...
- Ansible批量自动化管理工具(二)
Ansible批量自动化管理工具(二) 链接:https://pan.baidu.com/s/1A3Iq3gGkGS27L_Gt37_I0g 提取码:ncy2 复制这段内容后打开百度网盘手机App,操 ...
- Java创建线程后,调用start()方法和run()的区别
1) start方法: 用start方法来启动线程,真正实现了多线程运行,这时无需等待run方法体代码执行完毕而直接继续执行下面的代码.通过调用Thread类的start()方法来启动一个线程,这时此 ...
- Docker 部署 nginx 前端项目
docker pull nginx docker run -itd -p 82:80 -v /opt/soft/nginx/conf/nginx.conf:/etc/nginx/nginx.conf ...
- python 爬取头条视频
知识点总结 1. 利用webdriver 模拟浏览器访问 from selenium import webdriver 2.import requests 3. from bs4 import Bea ...
- 计算机网络之IP地址与MAC地址
IP地址 IP地址(Internet Protocol Address): 缩写为IP Adress,是一种在Internet上的给主机统一编址的地址格式,也称为网络协议(IP协议)地址. 它为互联网 ...
- 【转】让应用程序支持emoji字符
什么是emoji?就是这些表情和符号:
- asp.net MVC遇到的问题
参考:http://blog.csdn.net/chenqiangdage/article/details/48996101 asp.netMVC 如何解决“上下文模型已在数据库创建后发生更改” 问题 ...
- 质数密度+思维——cf1174D
/* 构造 n个点的无向图,无重边自环 边数e也是质数 点的度数也是质数 */ #include<bits/stdc++.h> #include<vector> using n ...
- js-原生js触发器使用
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...