手机
当前位置:查字典教程网 >网页设计 >HTML5教程 >html5 学习简单的拾色器
html5 学习简单的拾色器
摘要:下面是源码需要浏览器支持html5if(document.createElement("canvas")){if(document.getE...

下面是源码 需要浏览器支持html5

<html>

<head>

</head>

<body>

<canvas id="colorPicker" onmousemove="showCurrentColor(event)">

</canvas>

<br/>

<div id="textResult">

</div>

<script type="text/javascript">

if(document.createElement("canvas")){

if(document.getElementById("colorPicker").getContext){

var can = document.getElementById("colorPicker");

can.setAttribute("height",300);

var cxt = can.getContext("2d");

var gradient = cxt.createLinearGradient(0.5,0.5,0,150);

gradient.addColorStop(0,'#00ff00');

gradient.addColorStop(1,'#ff0000');

cxt.fillStyle=gradient;

cxt.fillRect(0,0,60,200);

var ox= can.offsetLeft

var oy = can.offsetTop;

var span = document.createElement("input");

span.setAttribute("id","rgba");

document.getElementById("textResult").appendChild(span);

}

}

function showCurrentColor(e){

var x = e.clientX - 8;

var y = e.clientY - 29;

var w = 10;

if(document.createElement("canvas")){

if(document.getElementById("colorPicker").getContext){

var can = document.getElementById("colorPicker");

var cxt = can.getContext("2d");

var gradient = cxt.createLinearGradient(0.5,0.5,0,150);

var span = document.getElementById("rgba");

var imgDatas = cxt.getImageData(ox,oy,10,200);

var imgData = imgDatas.data;

var g = imgData[4 *(w)*(y)+(x)*4 + 1];

var r = imgData[4 *(w)*(y)+(x)*4];

var b = imgData[4 *(w)*(y)+(x)*4 + 2];

var a = imgData[4 *(w)*(y)+(x)*4 + 3];

span.value="r="+r+" g="+ g+" b="+b +" a="+a;

document.getElementById("textResult").appendChild(span);

}

}

}

</script>

</body>

</html>

【html5 学习简单的拾色器】相关文章:

html5 视频播放解决方案

html5 input属性使用示例

HTML5 语义化结构化规范化

html5中的input新属性range使用记录

用html5实现的简单幻灯片实例

html5 button autofocus 属性介绍及应用

html5 实现客户端验证上传文件的大小(简单实例)

移动端html5 meta标签的神奇功效

html5基础教程常用技巧整理

html5+svg学习指南之SVG基础知识

精品推荐
分类导航