JS+HTML5 Canvas實現(xiàn)簡單的寫字板功能示例

更新時間：2018年08月30日 09:47:58 作者：鄒大叔

這篇文章主要介紹了JS+HTML5 Canvas實現(xiàn)簡單的寫字板功能,結(jié)合實例形式分析了js結(jié)合HTML5 canvas特性的圖形繪制相關操作技巧,需要的朋友可以參考下

本文實例講述了JS+HTML5 Canvas實現(xiàn)簡單的寫字板功能。分享給大家供大家參考，具體如下：

先來看運行效果：

具體代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>www.dhdzp.com JS寫字板</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style type="text/css">
        body,html {
            padding: 0;
            margin: 0;
        }
        a,div,span {
            font-family: "Arial","Microsoft YaHei","黑體","宋體",sans-serif;
        }
        .canvas-box {
            display: block;
            margin: 40px auto;
            background: #f5f5f5;
        }
        .color-box {
            width: 1080px;
            display: block;
            margin: 20px auto;
            text-align: center;
        }
        .color-item {
            display: inline-block;
            vertical-align: middle;
            width: 48px;
            height: 24px;
            margin: 10px;
            background: #989898;
            cursor: pointer;
        }
        .red {
            background: #e01d5b;
        }
        .blue {
            background: #1d6ae0;
        }
        .green {
            background: #1de087;
        }
        .yellow {
            background: #f3e41d;
        }
        .orange {
            background: #f9850b;
        }
        .black {
            background: #333;
        }
        .color-item.active {
            border: solid 3px #565656;
        }
        .btn {
            display: block;
            width: 120px;
            height: 40px;
            line-height: 40px;
            margin: 10px auto;
            text-align: center;
            font-size: 18px;
            border: solid 1px #999;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <canvas class="canvas-box" id="canvas"></canvas>
    <div class="color-box">
        <span class="color-item red"></span>
        <span class="color-item blue"></span>
        <span class="color-item green"></span>
        <span class="color-item yellow"></span>
        <span class="color-item orange"></span>
        <span class="color-item black active"></span>
    </div>
    <div class="btn" onclick="clearDraw()">清除</div>
<script type="text/javascript">
var    canvas = document.getElementById('canvas');
var    context = canvas.getContext("2d");
var    isDraw = false; //定義變量控制畫筆是否可用
var movePos;         //定義變量存放初始畫筆開始位置
var linWidth = 10;
var linColor = '#333';
window.onload = function(){
    draw();
}
function draw(){
    canvas.width = 500;
    canvas.height = 500;
    context.strokeStyle = "red";
    context.lineWidth = 10;
    context.beginPath();
    context.strokeRect(0,0,500,500);
    //設置畫筆顏色，寬度
    context.strokeStyle = "red";
    context.lineWidth = 1;
    //使線段連續(xù)，圓滑
    context.lineCap = "round";
    context.lineJoin = "round";
    drawDashedLine(context,0,0,500,500);
    drawDashedLine(context,0,500,500,0);
    drawLine(context,0,250,500,250);
    drawLine(context,250,0,250,500);
}
//畫虛線（參照網(wǎng)上大神）
function drawDashedLine(context, x1, y1, x2, y2, dashLength) {
  dashLength = dashLength === undefined ? 5 : dashLength;
  var deltaX = x2 - x1;
  var deltaY = y2 - y1;
  var numDashes = Math.floor(
   Math.sqrt(deltaX * deltaX + deltaY * deltaY) / dashLength);
   for (var i=0; i < numDashes; ++i) {
   context[ i % 2 === 0 ? 'moveTo' : 'lineTo' ]    (x1 + (deltaX / numDashes) * i, y1 + (deltaY / numDashes) * i);
   }
  context.stroke();
};
//畫直線
function drawLine(context,x1,y1,x2,y2){
    context.moveTo(x1,y1);
    context.lineTo(x2,y2);
    context.stroke();
};
//獲取鼠標相對與canvas位置
function getPos(x,y){
    var box = canvas.getBoundingClientRect();
    return {x: x-box.left,y: y-box.top};
};
//畫筆
function drawing(e){
    if(isDraw){
        var position = getPos(e.clientX,e.clientY);
        context.strokeStyle = linColor;
        context.lineWidth = linWidth;
        context.save();
        context.beginPath();
        context.moveTo(movePos.x,movePos.y);
        context.lineTo(position.x,position.y);
        context.stroke();
        movePos = position;
        context.restore();
    }
}
//鼠標點下
canvas.onmousedown = function(e){
    isDraw = true;
    movePos = getPos(e.clientX,e.clientY);
    drawing(e);
}
//鼠標移動
canvas.onmousemove = function(e){
    drawing(e);
}
//鼠標松開
canvas.onmouseup = function(e){
    isDraw = false;
}
//鼠標離開
canvas.onmouseout =function(e){
    isDraw = false;
}
//選擇畫筆顏色
$('.color-item').on('click',function(){
    $(this).addClass('active').siblings().removeClass('active');
    linColor = $(this).css('background-color');
});
//清除
function clearDraw(){
    context.clearRect(0,0,500,500);
    draw();
}
</script>
</body>
</html>

感興趣的朋友還可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼，親身體驗一下運行效果。

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章:

原生JS實現(xiàn)拖拽功能
這篇文章主要為大家介紹了JS實現(xiàn)拖拽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-12-12
javascript原型鏈學習記錄之繼承實現(xiàn)方式分析
這篇文章主要介紹了javascript原型鏈學習記錄之繼承實現(xiàn)方式,結(jié)合實例形式分析了javascript使用原型鏈實現(xiàn)繼承的相關操作技巧與注意事項,需要的朋友可以參考下
2019-05-05
javascript中sort() 方法使用詳解
sort()方法主要是用于對數(shù)組進行排序，默認情況下該方法是將數(shù)組元素轉(zhuǎn)換成字符串，然后按照ASC碼進行排序，這個大家都能理解，但如果數(shù)組元素是一個Object呢，轉(zhuǎn)不了字符串，難道不能進行排序？答案當然是否定的,那么我們就來詳細探討下sort()方法的使用
2015-08-08
Express代理轉(zhuǎn)發(fā)服務器實現(xiàn)
這篇文章主要為大家介紹了Express代理轉(zhuǎn)發(fā)服務器實現(xiàn)技巧詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-05-05
JS獲取地址欄參數(shù)的兩種方法(簡單實用)
這篇文章主要介紹了JS獲取地址欄參數(shù)的兩種方法(簡單實用)，小編給大家推薦使用第一種采用正則表達式獲取地址欄參數(shù)的方法，此方法簡單實用，對js獲取地址欄參數(shù)相關知識感興趣的朋友，一起學習吧
2016-06-06
Bootstrap table表格初始化表格數(shù)據(jù)的方法
這篇文章主要介紹了Bootstrap-table表格初始化表格數(shù)據(jù)的方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2018-07-07
詳解JavaScript實現(xiàn)繼承的五種經(jīng)典方式(附圖解)
JavaScript中的繼承是一種機制,通過它可以創(chuàng)建一個對象,該對象可以享有另一個對象的屬性和方法,本文將詳細的為大家介紹實現(xiàn)繼承的五種經(jīng)典方式,感興趣的小伙伴跟著小編一起來看看吧
2023-08-08
微信小程序封裝自定義彈窗的實現(xiàn)代碼
這篇文章主要介紹了微信小程序封裝自定義彈窗的實現(xiàn)代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-05-05
微信小程序?qū)崿F(xiàn)滑動/點擊切換Tab及scroll-left的使用
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)滑動/點擊切換Tab,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-04-04
JS獲取子節(jié)點、父節(jié)點和兄弟節(jié)點的方法實例總結(jié)
這篇文章主要介紹了JS獲取子節(jié)點、父節(jié)點和兄弟節(jié)點的方法,結(jié)合實例形式總結(jié)分析了JavaScript針對子節(jié)點、父節(jié)點和兄弟節(jié)點獲取相關操作技巧與使用注意事項,需要的朋友可以參考下
2018-07-07