HTML5Canvas颜色选择器

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了HTML5Canvas颜色选择器，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5731字，纯文字阅读大概需要9分钟。

内容图文

这段代码是用HTML5来创建一个网页颜色选择器。首先在Canvas画一幅图，然后添加鼠标事件 “鼠标移动”，“鼠标点击”。在鼠标移动的时候，显示当前划过的颜色预览，在鼠标点击的时候，选中当前颜色，显示颜色的细节。

DEMO： http://www.oschina.net/uploads/demo/example158/

[代码] [HTML]代码

 
<html lang="en" > 
    <head> 
        <meta charset="utf-8" /> 
        <title><A title=HTML5 href="http://www.xyhtml5.com/">HTML5A> canvas - Image color picker | Script Tutorialstitle> 
        <link href="http://www.xyhtml5.com/css3">cssA>/main.<A title=css href="http://www.xyhtml5.com/css3">cssA>" rel="stylesheet" type="text/css" /> 
        <script type="text/http://www.xyhtml5.com/javascript">javascriptA>" src="js/jquery-1.5.2.min.js">script> 
        <script type="text/http://www.xyhtml5.com/javascript">javascriptA>" src="js/script.js">script> 
    head> 
    <body> 
        <div class="container"> 
            <div class="column1"> 
                <canvas id="panel" width="500" height="333">canvas> 
            div> 
            <div class="column2"> 
                <div><input type="button" value="Next image" id="swImage" />div> 
                <div>Preview:div> 
                <div id="preview">div> 
                <div>Color:div> 
                <div>R: <input type="text" id="rVal" />div> 
                <div>G: <input type="text" id="gVal" />div> 
                <div>B: <input type="text" id="bVal" />div> 
                <div>RGB: <input type="text" id="rgbVal" />div> 
                <div>RGBA: <input type="text" id="rgbaVal" />div> 
                <div>HEX: <input type="text" id="hexVal" />div> 
                <hr /> 
            div> 
            <div style="clear:both;">div> 
        div> 
        <footer> 
            <h2>HTML5 canvas - Image color pickerh2> 
            <a href="http://www.script-tutorials.com/html5-canvas-image-color-picker/" class="stuts">Back to original tutorial on <span>Script Tutorialsspan>a> 
        footer> 
    body> 
html>

[CSS]代码

*{ 
    margin:0; 
    padding:0; 
} 
  
body { 
    background-color:#bababa; 
    color:#fff; 
    font:14px/1.3 Arial,sans-serif; 
} 
  
footer { 
    background-color:#212121; 
    bottom:0; 
    box-shadow: 0 -1px 2px #111111; 
    display:block; 
    height:70px; 
    left:0; 
    position:fixed; 
    width:100%; 
    z-index:100; 
} 
  
footer h2{ 
    font-size:22px; 
    font-weight:normal; 
    left:50%; 
    margin-left:-400px; 
    padding:22px 0; 
    position:absolute; 
    width:540px; 
} 
  
footer a.stuts,a.stuts:visited{ 
    border:none; 
    text-decoration:none; 
    color:#fcfcfc; 
    font-size:14px; 
    left:50%; 
    line-height:31px; 
    margin:23px 0 0 110px; 
    position:absolute; 
    top:0; 
} 
  
footer .stuts span { 
    font-size:22px; 
    font-weight:bold; 
    margin-left:5px; 
} 
  
.container { 
    color:#000; 
    margin:20px auto; 
    position:relative; 
    width:730px; 
} 
  
.column1 { 
    float:left; 
    width:500px; 
} 
  
.column2 { 
    float:left; 
    padding-left:20px; 
    width:170px; 
} 
  
#panel { 
    border:1px #000 solid; 
    box-shadow:4px 6px 6px #444444; 
    cursor:crosshair; 
} 
  
.column2 > div { 
    margin-bottom:10px; 
} 
  
#swImage { 
    border:1px #000 solid; 
    box-shadow:2px 3px 3px #444444; 
    cursor:pointer; 
    height:25px; 
    line-height:25px; 
  
    border-radius:3px; 
    -moz-border-radius:3px; 
    -webkit-border-radius:3px; 
} 
  
#swImage:hover { 
    margin-left:2px; 
} 
  
#preview { 
    border:1px #000 solid; 
    box-shadow:2px 3px 3px #444444; 
    height:80px; 
    width:80px; 
  
    border-radius:3px; 
    -moz-border-radius:3px; 
    -webkit-border-radius:3px; 
} 
  
.column2 input[type=text] { 
    float:right; 
    width:110px; 
}

[JavaScript]代码

var canvas; 
var ctx; 
  
var images = [ // predefined array of used images 
    'images/pic1.jpg', 
    'images/pic2.jpg', 
    'images/pic3.jpg', 
    'images/pic4.jpg', 
    'images/pic5.jpg', 
    'images/pic6.jpg', 
    'images/pic7.jpg', 
    'images/pic8.jpg', 
    'images/pic9.jpg', 
    'images/pic10.jpg'
]; 
var iActiveImage = 0; 
  
$(function(){ 
  
    // drawing active image 
    var image = new Image(); 
    image.onload = function () { 
        ctx.drawImage(image, 0, 0, image.width, image.height); // draw the image on the canvas 
    } 
    image.src = images[iActiveImage]; 
  
    // creating canvas object 
    canvas = document.getElementById('panel'); 
    ctx = canvas.getContext('2d'); 
  
    $('#panel').mousemove(function(e) { // mouse move handler 
        var canvasOffset = $(canvas).offset(); 
        var canvasX = Math.floor(e.pageX - canvasOffset.left); 
        var canvasY = Math.floor(e.pageY - canvasOffset.top); 
  
        var imageData = ctx.getImageData(canvasX, canvasY, 1, 1); 
        var pixel = imageData.data; 
  
        var pixelColor = "rgba("+pixel[0]+", "+pixel[1]+", "+pixel[2]+", "+pixel[3]+")"; 
        $('#preview').css('backgroundColor', pixelColor); 
    }); 
  
    $('#panel').click(function(e) { // mouse click handler 
        var canvasOffset = $(canvas).offset(); 
        var canvasX = Math.floor(e.pageX - canvasOffset.left); 
        var canvasY = Math.floor(e.pageY - canvasOffset.top); 
  
        var imageData = ctx.getImageData(canvasX, canvasY, 1, 1); 
        var pixel = imageData.data; 
  
        $('#rVal').val(pixel[0]); 
        $('#gVal').val(pixel[1]); 
        $('#bVal').val(pixel[2]); 
  
        $('#rgbVal').val(pixel[0]+','+pixel[1]+','+pixel[2]); 
        $('#rgbaVal').val(pixel[0]+','+pixel[1]+','+pixel[2]+','+pixel[3]); 
        var dColor = pixel[2] + 256 * pixel[1] + 65536 * pixel[0]; 
        $('#hexVal').val( '#' + dColor.toString(16) ); 
    });  
  
    $('#swImage').click(function(e) { // switching images 
        iActiveImage++; 
        if (iActiveImage >= 10) iActiveImage = 0; 
        image.src = images[iActiveImage]; 
    }); 
});

本文由HTM5L中国网站小编整理转发，转载请注明出处。

内容总结

以上是互联网集市为您收集整理的HTML5Canvas颜色选择器全部内容，希望文章能够帮你解决HTML5Canvas颜色选择器所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/389668.html

来源：【匿名】

【上一篇】细谈HTML5新增的元素【下一篇】html5如何获取php数据

更多 ►

【HTML5Canvas颜色选择器】教程文章相关的互联网学习教程文章

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script> window.onload = function () {var oc = document.getElementById(‘c1‘);var ogc = oc.getContext(‘2d‘);var yimg = new Image();yimg.onload = function (){draw(this);}yimg.src = ‘img/5-5.jpg‘;function draw(obj){oc.width = obj.width;oc.height = obj.height*2;ogc.drawImage(obj,0,0);var oimg = ogc.getImageData(0,0,ob...

HTML5 Canvas arc()函数//////////////////////(转)【代码】【图】

实例创建一个圆形：var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(100,75,50,0,2*Math.PI); ctx.stroke();浏览器支持Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 arc() 方法。注释：Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。定义和用法arc() 方法创建弧/曲线（用于创建圆或部分圆）。提示：如需通过 arc() 来创建圆，请把起始角设置为 0...

html5 canvas头像裁剪上传【代码】【图】

效果：在博客里有另一篇头像裁剪是用actionscript实现的头像裁剪上传，这里拥护html5,用canvas实现下。前两次的右键是为了说明不是用flash做的。如果想要更严谨的，有技术支持的这个东西的话，可以用kissy的http://gallery.kissyui.com/imgcrop/2.0/guide/index.html.原理很简单：裁剪框是用html做的，canvas的作用在于每次移动，变形后根据裁剪框的位置坐标以及大小，绘制图像的部分并缩放，还有绘制裁剪框区域外的灰色区域，优点...

HTML5 Canvas绘图系列之一：圆弧等基础图形的实现【代码】【图】

之前的一个微信项目已经要结项了，最近整理一下项目中使用较多的canvas画图方面的知识吧，打算写个3,4篇的样子。本篇主要介绍基础操作和弧线画法。之后再写一下趋势图，直方图，文本图像处理的。言归正传，canvas元素本身是一个容器元素，提供一块画布，用脚本来实现想要画什么。为了演示使用，我们新增一个空的aspx页。首先，我们新增一个canvas元素： <canvas id="myConvas" style="display:block; margin:...

html5之Canvas路径绘图、坐标变换应用实例【图】

在上一篇中我们了解html5的Canvas ，在这一篇中不用多说，写一个html5的时钟应用程序试手。在这里主要设置了坐标变换的平移（translate）和旋转变换（ratate），以及html5 Canvas的路径绘图，beginPath，closePath，rect，arc等，还有就是html5 Canvas路径绘图重要的绘图状态的保存和恢复机制，save，restore。多的也不说了，直接上代码，有不解的欢迎提问，以及对我的建议指教都可以。 ff下效果图：代码：复制代码代码如下:<h...

html5 canvas 移动小方块【代码】

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> body{background:pink;} #c1{background:white;} </style><script> window.onload = function () {var oc = document.getElementById(‘c1‘);var ogc = oc.getContext(‘2d‘);var num = 0;setInterval(function (){num++;ogc.clearRect(0,0,oc.width,oc.height);ogc.fillRect(num,num,100,100);},20)} </script> </head><body><canv...

PHP实现将HTML5中Canvas图像保存到服务器的方法

本文实例讲述了PHP实现将HTML5中Canvas图像保存到服务器的方法。分享给大家供大家参考。具体实现方法如下：一、问题：在几年前HTML5还没有流行的时候，我们的项目经理曾经向我提出这样一个需求：让项目评审专家们在评审结束时用笔在平板电脑上进行电子签名。这需要我们评审软件里提供这样一个功能：打开浏览器，登录，进入评审意见页，页面最下部有个方块区域，用户在这里用触摸笔进行签名，然后这个签名将会保持的服务器上。这样的...

HTML5学习记录-----canvas学习之鼠标选取放大图像【图】

canvas鼠标选取放大欢迎大家有好点建议可以提。js高级扣扣群：170798851 欢迎来交流学习??? git项目地址：https://github.com/Jonavin/HTML5_Study/*** Created by wsf on 2014-11-23.*/ ;//分号为了保证代码合并时不出错 (function(win){"use strict";var doc = win.document,cvs = doc.querySelector("#canvas"),selector = doc.getElementById("selector"),restBtn = doc.getElementById("resetBtn"),ctx = cvs.getContext("2d...

绘制SVG内容到Canvas的HTML5应用【图】

SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术，两种绘制图形方式各有优缺点，但两者并非水火不容，尤其是SVG内容可直接绘制在Canvas上的功能，使得两者可以完美的融合在一起，让Canvas可享用到现有丰富的SVG素材，并不失SVG矢量无级缩放的特点。《基于HTML5的Drag and Drop生成图片Base64信息》这篇虽然展示的是拖拽普通栅格图片的效果，但你也可以直接拖拽SVG格式的图片进行显示，只不过普通图片的格式数据为data:...

html5 canvas fillRect坐标和大小的问题解决方法

fillRect(100,100,100,100) 前2个100是指坐标，后2个100是指宽和高。今天学习html5 的canvas，发现fillRect的坐标和大小一直不对，研究了半天，发现canvas的宽度和高度必须内联在canvas标签中才对。郁闷了半天。错误的方式1: 复制代码代码如下:<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #mycanvas{ width: 200px; height: 200px; background: yellow; } </style> </head...

HTML5 创建canvas元素示例代码

HTML5 创建canvas元素复制代码代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset = utf-8"> <title>HTML5</title> <script type="text/javascript" charset = "utf-8">  function pageLoaded() { alert(‘HTML5 页面加载完毕!‘); } </script> </head> <body ...

Html5 Canvas斗地主游戏【代码】【图】

过完年来公司，没什么事，主管说研究下html5 游戏，然后主管就给了一个斗地主的demo，随后我就开始看代码，现在我看了html5以及canvas相关知识和斗地主的demo后，自己用demo上的素材试着写了个斗地主，代码没重构好，欢迎赐教。演示地址:CanVas斗地主话不多说，下面就一步一步解释下吧只有一个common.js文件1、资源类 1var Resource = Class.create();2$.extend(Resource.prototype, {3 initial...

html5 canvas 五子棋游戏【代码】

<!doctype html> <html> <head><meta charset="utf-8"><title>五子棋</title><style type="text/css">*{margin: 0px;padding: 0px;}canvas{background: url(images/bg.jpg);}canvas:hover{cursor: pointer;}</style> </head><body><canvas width="800" height="800" id="canvas"></canvas><script type="text/javascript">//初始化var canvas = document.getElementById(‘canvas‘);var context = canvas.getContext(‘2d‘);var ...

玩转 html5 (二) ---- 用 canvas 结合脚本在画布上画简单的图 (html5 又一强大功能)

在html5中可以使用canvas标签在画布上画图，先直接上代码，这篇文章先简单介绍一下canvas的使用方法，简单画几个圆，矩形，三角形，写字。在代码中均给出了注释，在这里特别强调的一点是：使用canvas画图时有时候必须beginPath和colsePath,但有时不需要，为了防止出现问题，可以在每次重新画一个图时重新开启路径，画完后关闭路径。这些代码是在猎豹浏览器上实现的，有些浏览器可能不支持。[html] view plaincopy <!DOCTYPE html> ...

html5-Canvas【图】

canvas介绍及使用方法一、canvas简介　　?<canvas> 是 html5 新增的，一个可以使用脚本(通常为 javascript) 在其中绘制图像的 html 元素。它可以用来制作照片集或者制作简单的动画，甚至可以进行实时视频处理和渲染。 ?它最初由苹果内部使用自己 macos x webkit 推出，供应用程序使用像仪表盘的构件和 safari 浏览器使用。后来，有人通过 gecko 内核的浏览器 (尤其是 mozilla和firefox)，opera 和 chrome 和超文本网络应用技术工作...

首页 / HTML5 / HTML5Canvas颜色选择器

HTML5Canvas颜色选择器

内容导读

内容图文

[代码] [HTML]代码

[CSS]代码

[JavaScript]代码

内容总结

内容备注

内容手机端

【HTML5Canvas颜色选择器】教程文章相关的互联网学习教程文章

html5 canvas图片反色【代码】

HTML5 Canvas arc()函数//////////////////////(转)【代码】【图】

html5 canvas头像裁剪上传【代码】【图】

HTML5 Canvas绘图系列之一：圆弧等基础图形的实现【代码】【图】

html5之Canvas路径绘图、坐标变换应用实例【图】

html5 canvas 移动小方块【代码】

PHP实现将HTML5中Canvas图像保存到服务器的方法

HTML5学习记录-----canvas学习之鼠标选取放大图像【图】

绘制SVG内容到Canvas的HTML5应用【图】

html5 canvas fillRect坐标和大小的问题解决方法

HTML5 创建canvas元素示例代码

Html5 Canvas斗地主游戏【代码】【图】

html5 canvas 五子棋游戏【代码】

玩转 html5 (二) ---- 用 canvas 结合脚本在画布上画简单的图 (html5 又一强大功能)

html5-Canvas【图】

HTML5CANVAS - 相关标签

HTML5 - 技术教程分类

HTML5 - 最新教程

HTML5 - 最热教程