HTML5拾色器選取顏色方便

2024-09-05 12:19:07

字體：大中小

來源：轉載

供稿：網友

基于HTML5的簡易拾色器，在網頁上選取顏色用的，相信見到的挺多了吧，不過這款是用HTML5技術編寫實現的。

<!doctype html><html lang="en"><head><title>HTML5簡易拾色器</title><style>canvas{	border:1px dotted skyblue;cursor:pointer;	/*width: 600px;height: 100px;*/	/*css設置的寬高等于是PS中將位圖進行變換操作（Ctrl+T）*/}.canvasPicker{	cursor:none;}body{	font-family: consolas,微軟雅黑;}#colorInput{	border:1px solid #DDD;border-radius: 3px;	line-height: 25px;height: 25px;}#color{	height: 25px;	background-color:gray;border-radius: 3px;}#dot{	position: fixed;	width:1px;height: 1px;background-color: black;box-shadow:0px 0px 1px white;}</style></head><body>	<div   class="iwvjtn8m0"   id="dot"></div><canvas id="canvas" width="400" height="400">	</canvas><br><label>rgba(<input type="text" id="colorInput">)</label><div   class="iwvjtn8m0"   id="color"></div><script src="/ajaxjs/jquery-1.6.2.min.js"></script><script>var nimo={	$canvas:null,	eCanvas:null,	$colorInput:null,	$color:null,	$dot:null,	context:null,	ragiaGradient:null,	position:null,	colorPicker:function(event){		var coordX=event.clientX-nimo.position.left;		var coordY=event.clientY-nimo.position.top;		var aColor=nimo.context.getImageData(coordX,coordY,1,1).data;		var sColor=Array.prototype.join.apply(aColor);		nimo.$colorInput.val(sColor);		nimo.$color.css({			'background-color':'rgba('+sColor+')'		})		nimo.$dot.css({			top:event.clientY,			left:event.clientX		})	}};$(function(){	nimo.$canvas=$('#canvas')	nimo.eCanvas=nimo.$canvas.get(0);	nimo.$colorInput=$('#colorInput');		nimo.$color=$('#color');	nimo.$dot=$('#dot');	nimo.context=nimo.eCanvas.getContext('2d');	nimo.context.arc(200,200,150,0,2*Math.PI);	nimo.radiaGradient=nimo.context.createRadialGradient(90,90,0,310,310,360);	nimo.radiaGradient.addColorStop(0,'red');	nimo.radiaGradient.addColorStop(0.2,'orange');	nimo.radiaGradient.addColorStop(0.3,'yellow');	nimo.radiaGradient.addColorStop(0.4,'green');		nimo.radiaGradient.addColorStop(0.5,'blue');	nimo.radiaGradient.addColorStop(0.8,'purple');	nimo.context.fillStyle=nimo.radiaGradient;	nimo.context.strokeStyle='#999';	nimo.context.shadowBlur=3;	nimo.context.shadowColor='rgba(0,0,10,0.2)';	nimo.context.fill();	nimo.context.stroke();		nimo.context.beginPath();	nimo.position=nimo.$canvas.offset();	nimo.$canvas.on('mousedown',function(ev){		var $this=$(this);		$this.addClass('canvasPicker');		nimo.colorPicker(ev)		$this.on('mousemove.picker',function(event){						nimo.colorPicker(event)		})		$(document).on('mouseup',function(){						nimo.$canvas.removeClass('canvasPicker');			nimo.$canvas.off('mousemove.picker')		})		})})</script></body></html>

上一篇：HTML5 隨機彈跳的小球

下一篇：HTML5 SVG指針式時鐘走時特效