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

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:09:03

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

JS+HTML5 Canvas實(shí)現(xiàn)簡(jiǎn)單的寫字板功能示例:本文實(shí)例講述了JS+HTML5 Canvas實(shí)現(xiàn)簡(jiǎn)單的寫字板功能。分享給大家供大家參考，具體如下：先來看運(yùn)行效果：具體代碼如下： <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀JS+HTML5 Canvas實(shí)現(xiàn)簡(jiǎn)單的寫字板功能示例:本文實(shí)例講述了JS+HTML5 Canvas實(shí)現(xiàn)簡(jiǎn)單的寫字板功能。分享給大家供大家參考，具體如下：先來看運(yùn)行效果：具體代碼如下： <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title

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

先來看運(yùn)行效果：

具體代碼如下：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>www.gxlcms.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);
 //設(shè)置畫筆顏色，寬度
 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();
};
//獲取鼠標(biāo)相對(duì)與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();
 }
}
//鼠標(biāo)點(diǎn)下
canvas.onmousedown = function(e){
 isDraw = true;
 movePos = getPos(e.clientX,e.clientY);
 drawing(e);
}
//鼠標(biāo)移動(dòng)
canvas.onmousemove = function(e){
 drawing(e);
}
//鼠標(biāo)松開
canvas.onmouseup = function(e){
 isDraw = false;
}
//鼠標(biāo)離開
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代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼，親身體驗(yàn)一下運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容還可查看本站專題：《JavaScript+HTML5特效與技巧匯總》、《JavaScript圖形繪制技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

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

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：寫字 js html5

熱門焦點(diǎn)

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

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

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

最新推薦

猜你喜歡

熱門推薦