HTML5画布颜色选择器

来源：互联网发布：交易平台网站源码编辑：程序博客网时间：2024/04/28 11:04
说明:Mousedown颜色区域选择一个颜色。
<!DOCTYPE HTML><html>  <head>    <style>      body {        margin: 0px;        padding: 0px;      }    </style>  </head>  <body>    <canvas id="myCanvas" width="578" height="276"></canvas>    <script>      function getMousePos(canvas, evt) {        var rect = canvas.getBoundingClientRect();        return {          x: evt.clientX - rect.left,          y: evt.clientY - rect.top        };      }      function drawColorSquare(canvas, color, imageObj) {        var colorSquareSize = 100;        var padding = 10;        var context = canvas.getContext('2d');        var squareX = (canvas.width - colorSquareSize + imageObj.width) / 2;        var squareY = (canvas.height - colorSquareSize) / 2;        context.beginPath();        context.fillStyle = color;        context.fillRect(squareX, squareY, colorSquareSize, colorSquareSize);        context.strokeRect(squareX, squareY, colorSquareSize, colorSquareSize);      }      function init(imageObj) {        var padding = 10;        var canvas = document.getElementById('myCanvas');        var context = canvas.getContext('2d');        var mouseDown = false;        context.strokeStyle = '#444';        context.lineWidth = 2;        canvas.addEventListener('mousedown', function() {          mouseDown = true;        }, false);        canvas.addEventListener('mouseup', function() {          mouseDown = false;        }, false);        canvas.addEventListener('mousemove', function(evt) {          var mousePos = getMousePos(canvas, evt);          var color = undefined;          if(mouseDown && mousePos !== null && mousePos.x > padding && mousePos.x < padding + imageObj.width && mousePos.y > padding && mousePos.y < padding + imageObj.height) {            // color picker image is 256x256 and is offset by 10px            // from top and bottom            var imageData = context.getImageData(padding, padding, imageObj.width, imageObj.width);            var data = imageData.data;            var x = mousePos.x - padding;            var y = mousePos.y - padding;            var red = data[((imageObj.width * y) + x) * 4];            var green = data[((imageObj.width * y) + x) * 4 + 1];            var blue = data[((imageObj.width * y) + x) * 4 + 2];            var color = 'rgb(' + red + ',' + green + ',' + blue + ')';            drawColorSquare(canvas, color, imageObj);          }        }, false);        context.drawImage(imageObj, padding, padding);        drawColorSquare(canvas, 'white', imageObj);      }      var imageObj = new Image();      imageObj.onload = function() {        init(this);      };      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/color-picker.png';    </script>  </body></html>
0 0