HTML5、canvas颜色拾取器
生活随笔
收集整理的這篇文章主要介紹了
HTML5、canvas颜色拾取器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?效果圖：
代碼：
<!doctype html> <html lang="en"> <head><meta charset="UTF-8" /><title>canvas 顏色拾取器</title><style>#canvas {border: 1px solid red;}#block {display: inline-block;width:50px;height: 50px;vertical-align: top;background-color: black;}</style> </head> <body> <canvas id="canvas" width="400" height="400">你的瀏覽器不支持canvas</canvas><span id="block"></span><script>//獲取id var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");//繪制填充顏色塊 for(var i = 0; i < 16; i++) {for(var j = 0; j < 16; j++) {// gba(255,255,0) --->gba(255,0,0) ctx.fillStyle = "rgb("+(255 - j*16)+","+(255 - i*16)+",0)";ctx.fillRect(i*25,j*25,25,25);}}// 顯示獲取的顏色var block = document.getElementById("block");// 點擊利用imgDate獲取rgb值 canvas.onclick = function(e) {var e = e || window.event;//e.layerX，e.layerY相對于綁定事件對象canvas的坐標var x = e.layerX;var y = e.layerY;// console.log(e);var imgData = ctx.getImageData(x,y,1,1);var r = imgData.data[0];var g = imgData.data[1];var b = imgData.data[2];block.style.backgroundColor = "rgb("+r+","+g+","+b+")";}</script> </body></html>?
?
轉載于:https://www.cnblogs.com/CaktyRiven/p/5287774.html
總結
以上是生活随笔為你收集整理的HTML5、canvas颜色拾取器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 热带雨林绘画软件测试,儿童画教程｜色彩练
- 下一篇： 2017年html5行业报告,云适配发布