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


Posted in Javascript onAugust 30, 2018

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

先来看运行效果:

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

具体代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>3water.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.3water.com/code/HtmlJsRun测试上述代码,亲身体验一下运行效果。

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

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

Javascript 相关文章推荐
减少访问DOM的次数提升javascript性能
Feb 24 Javascript
node.js中的fs.linkSync方法使用说明
Dec 15 Javascript
javascript中Number对象的toString()方法分析
Dec 20 Javascript
js实现字符串转日期格式的方法
May 20 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
Jan 25 Javascript
IONIC自定义subheader的最佳解决方案
Sep 22 Javascript
JS取模、取商及取整运算方法示例
Oct 13 Javascript
微信小程序 数据绑定详解及实例
Oct 25 Javascript
node.js操作mongodb简单示例分享
May 25 Javascript
vue.js如何将echarts封装为组件一键使用详解
Oct 10 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
Sep 07 Javascript
小程序实现筛子抽奖
May 26 Javascript
详解React native fetch遇到的坑
Aug 30 #Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Aug 30 #Javascript
原生JS实现简单的倒计时功能示例
Aug 30 #Javascript
JavaScript fetch接口案例解析
Aug 30 #Javascript
vue组件表单数据回显验证及提交的实例代码
Aug 30 #Javascript
原生JS实现的简单小钟表功能示例
Aug 30 #Javascript
使用Node搭建reactSSR服务端渲染架构
Aug 30 #Javascript
You might like
PHP设计模式 注册表模式
2012/02/05 PHP
PHP转换IP地址到真实地址的方法详解
2013/06/09 PHP
yii用户注册表单验证实例
2015/12/26 PHP
PHP生成图像验证码的方法小结(2种方法)
2016/07/18 PHP
PHP DB 数据库连接类定义与用法示例
2019/03/11 PHP
php把文件设置为插件的技巧方法
2020/02/03 PHP
Javascript优化技巧(文件瘦身篇)
2008/01/28 Javascript
JS实现self的resend
2010/07/22 Javascript
jquery控制listbox中项的移动并排序的实现代码
2010/09/28 Javascript
弹出层之1:JQuery.Boxy (一) 使用介绍
2011/10/06 Javascript
JavaScript中的console.dir()函数介绍
2014/12/29 Javascript
JavaScript事件委托实例分析
2015/05/26 Javascript
JavaScript实现删除,移动和复制文件的方法
2015/08/05 Javascript
JQuery中Ajax()的data参数类型实例分析
2015/12/15 Javascript
javascript实现数组去重的多种方法
2016/03/14 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
2016/10/26 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
nodejs中安装ghost出错的原因及解决方法
2017/10/23 NodeJs
Vue实现随机验证码功能
2020/12/29 Vue.js
[02:25]专访DOTA2负责人Erik 国际邀请赛暂不会离开西雅
2014/07/21 DOTA
[00:50]2014DOTA2国际邀请赛 NEWBEE战队回顾
2014/08/01 DOTA
Python中定时任务框架APScheduler的快速入门指南
2017/07/06 Python
python进阶之多线程对同一个全局变量的处理方法
2018/11/09 Python
Python实现堡垒机模式下远程命令执行操作示例
2019/05/09 Python
python矩阵运算,转置,逆运算,共轭矩阵实例
2020/05/11 Python
python在CMD界面读取excel所有数据的示例
2020/09/28 Python
应用化学专业职业生涯规划书
2013/12/31 职场文书
生产助理岗位职责
2014/06/18 职场文书
七一建党节演讲稿
2014/09/11 职场文书
元旦标语大全
2014/10/09 职场文书
运动会闭幕词
2015/01/28 职场文书
保送生自荐信
2015/03/06 职场文书
大学同学聚会感言
2015/07/30 职场文书
使用CSS3实现按钮悬停闪烁动态特效代码
2021/08/30 HTML / CSS
Python常遇到的错误和异常
2021/11/02 Python
VUE使用draggable实现组件拖拽
2022/04/06 Vue.js