使用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子网掩码优化配置
prefix prefix是前缀的意思,这里指子网掩码的位数. 如255.255.255.0则在ifcfg-eth0的配置文件中:PREFIX=24而NETMASK与PREFIX的作用是一样的,都是配 ...
- JavaScript常用技巧之字符串操作
1.首字母大写 str.replace(/\b\w+/g, function (word) { return word.substring(0, 1).toLowerCase() + word.sub ...
- 前端学习(十九)jquery(笔记)
jquery:库,框架 js,别人封装成的js 官网:http://jquery.com/ -----------------------------------1.7 ----------jq 1. ...
- 【Luogu】【关卡2-7】深度优先搜索(2017年10月)【AK】【题解没写完】
任务说明:搜索可以穷举各种情况.很多题目都可以用搜索完成.就算不能,搜索也是骗分神器. P1219 八皇后 直接dfs.对角线怎么判断:同一条对角线的横纵坐标的和或者差相同. #include < ...
- nodejs 模板引擎jade的简单使用
1.jade html head style script body div ul li li jade1.js var jade=require('jade'); var str=jade.rend ...
- CSIC_716_20191213【内置函数exec、元类】
In memory of the more than 300 thousand Chinese murdered exec( 字符类型的代码,全局变量,局部变量 ).其中,全局变量和局部变量可以写成字 ...
- SpringBoot集成Swagger(Swagger的使用),生成接口文档,方便前后端分离开发
首先上一张成果图. 1.Maven依赖 <dependency> <groupId>io.springfox</groupId> <artifactId&g ...
- png图标任意赋色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Qt第三方库QCustomPlot——QCustomPlot解读
这个小部件类,对于QCustomPlot的所有方面都有所体现 下面阅读它的函数: 函数组织顺序为: 基本设置---添加图线---删除图线---添加额外Item---层次管理---坐标轴管理----导出 ...
-  导致页面顶部空白一行
模板文件生成html文件以后会在页面body开头处生成可见的控制符 导致页面头部出现一个空白行,导致这样的原因就是页面的编码格式是UTF-8 + BOM 解决方法,最简单的就是使用编辑器重新保存文件 ...