JavaScript

超轻量级php框架startmvc

JS+HTML5 Canvas实现简单的写字板功能示例

更新时间:2020-07-24 02:48:01 作者:startmvc
本文实例讲述了JS+HTML5Canvas实现简单的写字板功能。分享给大家供大家参考,具体如下:先

本文实例讲述了JS+HTML5 Canvas实现简单的写字板功能。分享给大家供大家参考,具体如下:

先来看运行效果:

具体代码如下:


<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>www.jb51.net 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;
 //使线段连续,圆滑
 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);
}
//画虚线(参照网上大神)
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测试上述代码,亲身体验一下运行效果。

JS HTML5 Canvas 写字板