一个简单的html5画板

jopen 6年前
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">        <html xmlns="http://www.w3.org/1999/xhtml">        <head>            <title>Paint</title>            <script type="text/javascript" src="draw.js" language="javascript"></script>        </head>        <body>            <div>                <canvas id="myCanvas" style="border: 2px solid red; background-image:url(juren.jpg)" height="349px" width="349px"></canvas>            </div>            <select name="kind" id="k" onchange="KarlChangeColor()">                  <option value="black">黑色</option>                  <option value="blue">蓝色</option>                  <option value="red">红色</option>                  <option value="green">绿色</option>                  <option value="yellow">黄色</option>                  <option value="purple">紫色</option>                  <option value="white">橡皮</option>            </select>            <input type="text" value="4" id="karlline" onchange="KarlChangeLineWidth()"/>        </body>        </html>  
这是js文件:
    // JavaScript Document            var colorKarlDraw = "black";            var LineWidth = 4;                        function KarlChangeLineWidth()            {                var KarlColorWidth = document.getElementById("karlline").value;                LineWidth = KarlColorWidth;            }                        function KarlChangeColor()            {                var KarlColor = document.getElementById("k").value;                colorKarlDraw = KarlColor;            }                            window.onload = function () {                    var canvas = document.getElementById("myCanvas");                    var ctx = canvas.getContext("2d");                            //鼠标左键按下                    canvas.onmousedown = function (e) {                        //开始记录路径                        ctx.beginPath();                        //将光标焦点移动到鼠标点击的位置                        ctx.moveTo(e.clientX - 10, e.clientY - 10);                        //设置当前绘线的粗细(默认1.0)[由于画布的坐标和像素并不是直接对应的,所以,此属性会有0.5像素的偏差]                        ctx.lineWidth = LineWidth;                        //设置绘线颜色                        ctx.strokeStyle = colorKarlDraw;                        //                //设置渐变(会替换掉绘线颜色)                        //                var lingrad = ctx.createLinearGradient(0, 0, 0, 600);                        //                lingrad.addColorStop(0, "#00ABEB");                        //                lingrad.addColorStop(0.5, "#fff");                        //                lingrad.addColorStop(1, "#66CC00");                        //                ctx.strokeStyle = lingrad;                                //设置绘线透明度(0.0-1.0默认1.0)                        ctx.globalAlpha = 1.0;                        //设置绘线端点显示的样子(round/butt/square)                        ctx.lineCap = "round";                        //设置线段拐角连接处显示的样子(round/bevel/miter默认)                        ctx.lineJoin = "round";                                //当鼠标左键按下时,监听鼠标移动事件                        canvas.onmousemove = function (e) {                            //用线段连接点                            ctx.lineTo(e.clientX - 10, e.clientY - 10);                            //用笔画描绘路径[可以试一下fill(),看看是什么效果哦]                            ctx.stroke();                        }                    }                    //当鼠标按下后,释放鼠标时,停止监听鼠标移动事件                    canvas.onmouseup = function (e) {                        canvas.onmousemove = null;                    }                    //直线渐变的示例                    function drawLinear() {                        // Create gradients(x1,y1,x2,y2)                        var lingrad = ctx.createLinearGradient(0, 0, 0, 150);                        //上色(position,color)[position value between 0.0 and 1.0]                        lingrad.addColorStop(0, 'blue');                        lingrad.addColorStop(0.5, '#fff');                        lingrad.addColorStop(0.5, '#66CC00');                        lingrad.addColorStop(1, 'red');                                var lingrad2 = ctx.createLinearGradient(0, 50, 0, 95);                        lingrad2.addColorStop(0.5, '#000');                        lingrad2.addColorStop(1, 'rgba(0,0,0,0)');                                // assign gradients to fill and stroke styles                        ctx.fillStyle = lingrad;                        ctx.strokeStyle = lingrad2;                                // draw shapes                        ctx.fillRect(10, 10, 130, 130);                        ctx.strokeRect(50, 50, 50, 50);                            }                    //径向渐变的示例                    function drawRadial() {                        var ctx = document.getElementById('myCanvas').getContext('2d');                                // Create gradients(x1,y1,r1,x2,y2,r2)                        var radgrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30);                        radgrad.addColorStop(0, '#A7D30C');                        radgrad.addColorStop(0.9, '#019F62');                        radgrad.addColorStop(1, 'rgba(1,159,98,0)');                                var radgrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50);                        radgrad2.addColorStop(0, '#FF5F98');                        radgrad2.addColorStop(0.75, '#FF0188');                        radgrad2.addColorStop(1, 'rgba(255,1,136,0)');                                var radgrad3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40);                        radgrad3.addColorStop(0, '#00C9FF');                        radgrad3.addColorStop(0.8, '#00B5E2');                        radgrad3.addColorStop(1, 'rgba(0,201,255,0)');                                var radgrad4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90);                        radgrad4.addColorStop(0, '#F4F201');                        radgrad4.addColorStop(0.8, '#E4C700');                        radgrad4.addColorStop(1, 'rgba(228,199,0,0)');                                // draw shapes                        ctx.fillStyle = radgrad4;                        ctx.fillRect(0, 0, 150, 150);                        ctx.fillStyle = radgrad3;                        ctx.fillRect(0, 0, 150, 150);                        ctx.fillStyle = radgrad2;                        ctx.fillRect(0, 0, 150, 150);                        ctx.fillStyle = radgrad;                        ctx.fillRect(0, 0, 150, 150);                    }                    //用图案填充画布的示例                    function drawImage() {                        var ctx = document.getElementById("myCanvas").getContext("2d");                        var img = new Image();                        img.src = "Images/1.jpg";                        img.onload = function () {                            var ptrn = ctx.createPattern(img, "repeat");                            ctx.fillStyle = ptrn;                            ctx.fillRect(0, 0, 400, 400);                        }                    }                    //设置阴影的示例                    function drawText() {                        var ctx = document.getElementById('myCanvas').getContext('2d');                                ctx.shadowOffsetX = 2;                        ctx.shadowOffsetY = 2;                        ctx.shadowBlur = 2;                        ctx.shadowColor = "lime";                                ctx.font = "20px Times New Roman";                        ctx.fillStyle = "black";                        ctx.fillText("Sample String", 5, 30);                    }                }