鼠标在canvas中绘图 

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

    <script type="text/javascript">
        var Dan= {
            width: 5,
            randomRGB: function () { return Math.round(Math.random() * 250) },
            color: function () { return 'rgba(' + Dan.randomRGB() + ',' + Dan.randomRGB() + ',' + Dan.randomRGB() + ',1)' }
        };
        var draw=function (e) {
            var e = window.event || e;
            var canvas = document.getElementById("canvas1");
            var context = canvas.getContext("2d");
            
            context.beginPath();
            context.moveTo(e.clientX, e.clientY);
            //指定颜色
            context.strokeStyle = Dan.color();
            context.lineWidth = Dan.width;
            context.lineCap = "round";
            context.lineJoin = "round";
            document.onmousemove = function (e) {
                context.lineTo(e.clientX, e.clientY);
                context.stroke();
                document.onmouseup = function () {
                    document.onmousemove = null;
                }
            }
        };
      
    </script>
</head>
<body>
  <canvas id="canvas1" width="580" height="200" onmousedown="draw(event)" ></canvas>
</body>
</html>

　　

posted @ 2012-11-19 14:33  bradleydan  阅读(100)  评论(0)    收藏  举报