操作像素A

1.绘制随机像素点

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

</head>
<body>
<canvas id="canvas1" width="300" height="300" style="background-color:black"></canvas>
    <input type="button" value="Draw" onclick="randomPixel()" />
        <script type="text/javascript">
            var canvas = document.getElementById("canvas1");
            var context = canvas.getContext("2d");
            var width = canvas.width;
            var height = canvas.height;
            var imageData = context.createImageData(width, height);
            function randomPixel() {
                var x = parseInt(Math.random() * width);
                var y = parseInt(Math.random() * height);
                var index = y * width + x;
                var p = index * 4;
                imageData.data[p + 0] = parseInt(Math.random() * 255);
                imageData.data[p + 1] = parseInt(Math.random() * 255);
                imageData.data[p + 2] = parseInt(Math.random() * 255);
                imageData.data[p + 3] = parseInt(Math.random() * 255);
                context.putImageData(imageData, 0, 0);
         
            }

    </script>
</body>
</html>

2.像素级别操作改变图形颜色

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../Scripts/jquery-1.7.1.js"></script>
    <script type="text/javascript">
        $(function () {
            Demo1();
        })
        function Demo1() {
            var canvas = document.getElementById("canvas1");
            var context = canvas.getContext("2d");
            context.strokeStyle = "#f00";
            context.beginPath();
            context.arc(70, 18, 15, 0, Math.PI * 2, true);
            context.closePath();
            context.stroke();
            context.beginPath();
            context.arc(70, 38, 15, 0, Math.PI * 2, true);
            context.closePath();
            context.stroke();
            var imageData;
            imageData = context.getImageData(0, 0, canvas.width, canvas.height);
            var pix = imageData.data;
            for (i = 0; i < pix.length; i+=4) {
                pix[i] = 0;// 红
                pix[i + 1] = 0;// 绿
                pix[i + 2] = 255;// 蓝  
           
            }
            context.putImageData(imageData,0,0);
        }

    </script>
</head>
<body>
    <canvas id="canvas1" width="500" height="300"></canvas>
</body>
</html>

 　　

3.反转颜色　

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../Scripts/jquery-1.7.1.js"></script>
    <script type="text/javascript">
        $(function () {
            var canvas = document.getElementById("canvas1");
            var context = canvas.getContext("2d");
            var img = new Image();
            img.onload = function () {
                context.drawImage(img, 0, 0);
                var data = context.getImageData(0, 0, canvas.width, canvas.height);
                for (i = 0; i < data.width * data.height;i+=4) {
                    data.data[i] = 255 - data.data[i];
                    data.data[i+1] = 255 - data.data[i+1];
                    data.data[i+2] = 255 - data.data[i+2];
                }
                context.putImageData(data,0,0);
            }
            img.src = "../Images/apple.jpg";
        })
   

    </script>
</head>
<body>
    <canvas id="canvas1" width="500" height="300"></canvas>
    
</body>
</html>

　　官方文档

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    
    <title></title>
    <style type="text/css">
        canvas {
        border:1px solid #ececf1;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var imageObj = new Image();
            imageObj.onload = function () {
                DrawImage(this);
            };
            imageObj.src = "../Images/2.jpg";
        }
        function DrawImage(imageObj) {
            var canvas = document.getElementById("canvas1");
            var context = canvas.getContext("2d");
            var desX = 100;
            var desY = 100;
            var sourceWidth = imageObj.width;
            var sourceHeight = imageObj.height;
            context.drawImage(imageObj, desX, desY);
            var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
            var data = imageData.data;
            // 遍历像素
            for (var i = 0; i < data.length; i += 4) {
                  data[i]=255-data[i];
                  data[i + 1]=255-data[i+1];
                  data[i + 2]=255-data[i+2];
            }
            // 方法二
            for (var y = 0; y < sourceHeight; y++) {
                for (var x = 0; x < sourceWidth; x++) {
                    var red = data[((sourceWidth * y) + x) * 4];
                    var green = data[((sourceWidth * y) + x) * 4+1];
                    var blue= data[((sourceWidth * y) + x) * 4+2];
                }
            }
            context.putImageData(imageData,0,0);

        }

    </script>
</head>
<body>
    <canvas id="canvas1" width="580" height="500" />
</body>
</html>

　　

 

posted @ 2012-11-20 11:02  bradleydan  阅读(147)  评论(0)    收藏  举报