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 相关文章推荐
window.onbeforeunload方法在IE下无法正常工作的解决办法
Jan 23 Javascript
JS模板实现方法
Apr 03 Javascript
JQuery插入DOM节点的方法
Jun 11 Javascript
最常见和最有用的字符串相关的方法详解
Feb 06 Javascript
微信小程序实现收藏与取消收藏切换图片功能
Aug 03 Javascript
element-ui 设置菜单栏展开的方法
Aug 22 Javascript
js实现动态增加文件域表单功能
Oct 22 Javascript
Vue.js中的组件系统
May 30 Javascript
vue新建项目并配置标准路由过程解析
Dec 09 Javascript
Vue实现移动端拖拽交换位置
Jul 29 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
Aug 07 Javascript
详解实现vue的数据响应式原理
Jan 20 Vue.js
详解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 array_map array_multisort 高效处理多维数组排序
2009/06/11 PHP
smarty简单应用实例
2015/11/03 PHP
PHP数学运算函数大汇总(经典值得收藏)
2016/04/01 PHP
javascript 运算数的求值顺序
2011/08/23 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
2013/01/23 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
2013/09/12 Javascript
javascript自定义的addClass()方法
2014/05/28 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
2014/07/02 Javascript
基于JS实现PHP的sprintf函数实例
2015/11/14 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
2016/02/23 Javascript
深入浅出ES6之let和const命令
2016/08/25 Javascript
JS搜狐面试题分析
2016/12/16 Javascript
jQuery使用方法
2017/02/04 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
2017/05/10 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
2020/07/23 Javascript
TypeScript 运行时类型检查补充工具
2020/09/28 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
[02:02]2018DOTA2亚洲邀请赛Mineski赛前采访
2018/04/04 DOTA
python获得两个数组交集、并集、差集的方法
2015/03/27 Python
python监控文件并且发送告警邮件
2018/06/21 Python
基于Python中求和函数sum的用法详解
2018/06/28 Python
pandas 按照特定顺序输出的实现代码
2018/07/10 Python
django多种支付、并发订单处理实例代码
2019/12/13 Python
canvas绘制圆角头像的实现方法
2019/01/17 HTML / CSS
马来西亚奢侈品牌购物商城:Valiram 247
2020/09/29 全球购物
2013年高中生自我评价
2013/10/23 职场文书
创先争优承诺书范文
2014/03/31 职场文书
新闻工作者先进事迹
2014/05/26 职场文书
企业员工爱岗敬业演讲稿
2014/08/26 职场文书
2014小学语文教学工作总结
2014/12/17 职场文书
助学金感谢信
2015/01/20 职场文书
2015年中个人总结范文
2015/03/10 职场文书
书法社团活动总结
2015/05/07 职场文书
立案决定书范文
2015/06/24 职场文书
如何写好开幕词?
2019/06/24 职场文书
CSS 还能这样玩?奇思妙想渐变的艺术
2021/04/27 HTML / CSS