查看演示

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<style type="text/css">
body, div{margin:0px;padding:0px;text-align:center}
#canvas{
  border:2px solid black;
  border-radius:4px;
  box-shadow:0px 0px 10px black;
  -webkit-box-shadow:0px 0px 10px black;
  -moz-box-shadow:0px 0px 10px black;
}
#bk{
  margin:10px auto;
  width:400px;
  height:36px;
}
.bk{
  text-align:center;
  width:20px;
  height:20px;
  margin:12px;
  display:inline-block;
  border:1px dotted gray;
}
.bk.on{border:1px solid red;}
</style>
<body>
<div id="bk"></div>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
//定义画笔颜色
var bColor = ["#000000", "#999999", "#CC66FF", "#FF0000", "#FF9900", "#FFFF00", "#008000", "#00CCFF"];
//当前画笔颜色
var col = '#FF0000';
function initBrush(){
    for(var i = 0; i<bColor.length; i++){
        var bk = $('<span class="bk"></span>').css("background-color", bColor[i]).click(function(){
            col = $(this).css('background-color');
            $(this).addClass('on').siblings().removeClass('on');
        });
        $('#bk').append(bk);
    }
}

function initPainter(){
   //绑定绘图canvas  
    var canvas = $('#canvas'),
        _this = this,
        x = 0,
        y = 0;
        ctx = canvas[0].getContext('2d');
    ctx.lineWidth = 2;
    //绑定鼠标按下时间
    canvas.on('mousedown',function(e){
        e.preventDefault();
        ctx.strokeStyle = col;
        x = e.offsetX;
        y = e.offsetY;
        //开始路径
        ctx.beginPath();
        ctx.moveTo(x,y);
        //绑定鼠标移动事件
        canvas.on('mousemove',function(e){
            var nx = e.offsetX,
                ny = e.offsetY;
            ctx.lineTo(x,y);
            ctx.stroke();
            x = nx;
            y = ny;
        })
         //绑定鼠标抬起事件
         canvas.on('mouseup',function(){
             //取消鼠标移动事件
             canvas.off('mousemove');
         })
    })

}

$(document).ready(function(){
    initBrush();
    initPainter();
})
</script>
</html>
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。