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

2019-11-19 13:06:39

字体：大中小

来源：转载

供稿：网友

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

先来看运行效果：

具体代码如下：

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>www.VeVB.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;    //使线段连续，圆滑    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.VeVB.COm/code/HtmlJsRun测试上述代码，亲身体验一下运行效果。

更多关于JavaScript相关内容还可查看本站专题：《JavaScript+HTML5特效与技巧汇总》、《JavaScript图形绘制技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

上一篇：解决vue的变量在settimeout内部效果失效的问题

下一篇：详解React native fetch遇到的坑