Html5环形取色器

最新推荐文章于 2021-06-15 15:25:59 发布

Irise_liu

最新推荐文章于 2021-06-15 15:25:59 发布

阅读量5.7k

点赞数 1

文章标签： canvas html5 取色

本文链接：https://blog.csdn.net/colored_glass/article/details/47977609

版权

本文介绍了如何使用HTML5的Canvas API来创建一个环形的取色器，详细阐述了实现过程。

摘要由CSDN通过智能技术生成

先说一下具体实现方式

1. 定义两个叠加的canvas, 底部的canvas画入一个彩色环图片
2. 顶层的canvas的onclick事件里执行代码画入一个白色的环，作为鼠标位置，
3. 从鼠标位置获取图片的像素，解析成rgb值。
——所以，必备材料是两张图片，大的彩色环图片以及小的白色环png图片

具体代码：
============================html布局
<div id="divPicker">
    <div id="divCanvas" style="width:400px; height:400px;margin:0 auto;position:relative;">
        <canvas id="myCanvas" width="400" height="400" style="position:absolute;top:0;left:0;">
            <p style="color:white;"></p>
        </canvas>
        <canvas id="pointCanvas" width="400" height="400" style="position:absolute;top:0;left:0;z-index:8888;">
        </canvas>
    </div>
    <img id="imgMark" src="content/images/light_color_qu.png" style="display:none" />
    <img id="tulip" src="content/images/light_color.png" style="display:none"/>
</div>
===================================js代码
var canvas;
var pointCanvas;
var ctx;

var colorPickerWidth;// it equals canvas width, setting on html
var smallRaudis;// the small raudis of wheel
var bigRaudis; // the big raudis of wheel
var imgSequ = 60;// setting the sequ of the event img. (Ori value is 107)
var smallerImgSequ = 60;
var bigImgSequ = 80; // setting the
var msSpan = 300; // setting time span to request, uni