html调色盘

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .circle {
        border: 2px solid #000;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        margin: 0 auto;
        background: conic-gradient(#F00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)
    }
    </style>
</head>
<body>
    <div class="circle">

    </div>
</body>
</html>

### 如何在 HTML5 Canvas 中创建调色盘 为了实现在 HTML5 `Canvas` 上绘制调色盘,可以采用多种方法来构建颜色选择器。下面提供了一种基于圆形渐变的方式,在此过程中会涉及到一些基本的图形学概念以及 JavaScript 和 HTML 的交互。 #### 创建基础结构 首先设置好网页的基础框架,包括引入必要的脚本文件并准备画布元素: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Color Picker</title> <style> body { margin: 0; } canvas { display:block; background:#fff;} </style> </style> <body> <canvas id="colorPicker"></canvas> <script src="script.js"></script> </body> </html> ``` 这段代码设置了页面样式,并预留了一个用于显示调色板的 `<canvas>` 元素[^1]。 #### 编写核心逻辑 接下来编写主要业务逻辑部分,即通过 JavaScript 来控制 Canvas 绘制过程。这里展示的是一个简单的圆环形色彩选取区域生成方式: ```javascript const canvas = document.getElementById('colorPicker'); const ctx = canvas.getContext('2d'); // 设置画布尺寸适应窗口大小 function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } resizeCanvas(); window.addEventListener('resize', resizeCanvas); // 定义中心位置与半径参数 const centerX = canvas.width / 2, centerY = canvas.height / 2, radius = Math.min(centerX, centerY) * 0.9; // 使用 createRadialGradient 方法制作彩虹效果的颜色过渡 let gradient = ctx.createRadialGradient( centerX, centerY, 0, centerX, centerY, radius ); for (let i = 0; i <= 1; i += 0.1){ const hue = i*360|0; gradient.addColorStop(i, 'hsl('+hue+', 100%, 50%)'); } ctx.fillStyle = gradient; ctx.beginPath(); ctx.arc(centerX, centerY, radius, 0, Math.PI * 2); ctx.closePath(); ctx.fill(); // 添加鼠标事件监听以便获取选中的颜色值 canvas.addEventListener('mousemove', function(event){ let rect = this.getBoundingClientRect(), x = event.clientX - rect.left, y = event.clientY - rect.top, dx = x - centerX, dy = y - centerY, angle = Math.atan2(dy,dx), distance = Math.sqrt(dx*dx + dy*dy)/radius; if(distance<=1){ // 只有当光标位于圆内才更新颜色 let hue = ((angle/(Math.PI*2)+1)*360)%360 | 0; console.log(`Selected Color HSL(${hue}, ${distance*100}%, 50%)`); } }); ``` 上述代码片段实现了如下功能:初始化画布、计算屏幕中央坐标作为原点;利用 `createRadialGradient()` 函数建立由红到紫循环变化的放射状梯度填充图案;最后添加了响应鼠标的移动操作以动态输出当前指针所指向的具体色调信息[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值