创建颜色板

源码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        canvas {
        border:1px solid #ff6a00;
        }

    </style>
    <script type="text/javascript">
        function Init() {
            var canvas = document.getElementById("canvas1");
            var context = canvas.getContext('2d');
            // createLinearGradient(startX, startY, endX, endY);
            var palette = context.createLinearGradient(0, 0, 360, 0);
            // addColorStop(offset, color);
            palette.addColorStop(0 / 6, '#ff0000');
            palette.addColorStop(1 / 6, '#ffff00');
            palette.addColorStop(2 / 6, '#00ff00');
            palette.addColorStop(3 / 6, '#00ffff');
            palette.addColorStop(4 / 6, '#0000ff');
            palette.addColorStop(5 / 6, '#ff00ff');
            palette.addColorStop(6 / 6, '#ff0000');
            context.fillStyle = palette;
            context.fillRect(0, 0, 360, 360);
            // 垂直方向上实现填充颜色
            var overlay = context.createLinearGradient(0, 0, 0, 360);
            overlay.addColorStop(0, 'rgba(0, 0, 0, 0)');
            overlay.addColorStop(1, 'rgba(0, 0, 0, 1)');
            context.fillStyle = overlay;
            context.fillRect(0, 0, 360, 360);
        }
    </script>
</head>
<body onload="Init();">
    <canvas id="canvas1" width="500" height="500"></canvas>
</body>
</html>

　　

 

posted @ 2012-11-22 09:25  bradleydan  阅读(114)  评论(0)    收藏  举报