canvas——画板

 注意部分：

---

 

canvas的height和width不能再css中设定，应该在html中设定，否则会影响页面的分辨率。

 

效果图：

---

 

图1：

 

代码

---

 

 

css：

#canvas{

    cursor: crosshair;

}

button{

    width: 80px;

}

.yellowBtn{

    background-color: yellow;

}

.redBtn{

    background-color: red;

}

.blueBtn{

    background-color: blue;

}

.greenBtn{

    background-color: green;

}

.whiteBtn{

    background-color: white;

}

.blackBtn{

    background-color:black;

}

页面：

    <canvas id="canvas" width="900" height="400">浏览器不支持html5</canvas> 

    <br>

    <button id="yellow" class="yellowBtn" onclick="lineColor='yellow';">YELLOW</button>

    <button id="red" class="redBtn" onclick="lineColor='red';">RED</button>

    <button id="blue" class="blueBtn" onclick="lineColor='blue';">BLUE</button>

    <button id="green" class="greenBtn" onclick="lineColor='green';">GREEN</button>

    <button id="white" class="whiteBtn" onclick="lineColor='white';">WHITE</button>

    <button id="black" class="blackBtn" onclick="lineColor='black';">BLACK</button>

    <br>

    <button class="lineWeight4" class="whiteBtn" onclick="lineWeight=2;">2px</button>

    <button class="lineWeight4" class="whiteBtn" onclick="lineWeight=4;">4px</button>

    <button class="lineWeight8" class="whiteBtn" onclick="lineWeight=8;">8px</button>

    <button class="lineWeight12" class="whiteBtn" onclick="lineWeight=12;">12px</button>

 

js：

   <script type="text/javascript">

    var canvas = document.getElementById("canvas");

    

    //判断是否支持canvas

    if(!canvas || !canvas.getContext){

        return false;

    }

    

    //获得context对象，目前只支持2d

    var ctx = canvas.getContext("2d");

    



    

    //画出画板背景，此处为矩形

    ctx.fillStyle = "black";

    ctx.fillRect(0, 0, 900, 400);

    

    //初始化鼠标是否按下和坐标点位置, true为按下

    var mouseState = false,

        oldX = -10,

        oldY = -10,

        lineColor = "white",

        lineWeight = 2;

        

    //canvas添加鼠标事件, 鼠标移动、鼠标按下和鼠标弹起

    if(window.addEventListener){

        canvas.addEventListener("mousemove", draw, true);

        canvas.addEventListener("mousedown", down, false);

        canvas.addEventListener("mouseup", up, false);



    }else{

        canvas.attachEvent("onmousemove", draw);

        canvas.attachEvent("onmousedown", down);

        canvas.attachEvent("onmouseup", up);

    }

    

    //鼠标按下，拖动画图

    function draw(event){

        if(mouseState === true){

            var newX = event.clientX - 10;

            var newY = event.clientY - 10;

            

            ctx.beginPath();

            ctx.moveTo(oldX, oldY);

            ctx.lineTo(newX, newY);

            

            ctx.strokeStyle = lineColor;

            ctx.lineWidth = lineWeight;

            ctx.lineCap = "round";

            ctx.stroke();

            

            oldX = newX;

            oldY = newY;

        }

        

    }

    

    function down(event){

        mouseState = true;

        oldX = event.clientX - 10;

        oldY = event.clientY - 10;

    }

    

    function up(){

        mouseState = false;

    }

    

    </script>

 

 增加导出功能：

---

 

 

使用 canvas.toDataURL("image/png");保存图片，eg：

    function exportImage(event){

        var imgSrc = canvas.toDataURL("image/png");

        document.getElementById("image").src = imgsrc;

    }