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 相关文章推荐
你需要知道的JavsScript可以做什么?
Jun 29 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
Dec 30 Javascript
JavaScript获得url查询参数的方法
Jul 02 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
Feb 16 Javascript
angularjs下拉框空白的解决办法
Jun 20 Javascript
vue中七牛插件使用的实例代码
Jul 28 Javascript
js实现延迟加载的几种方法详解
Jan 19 Javascript
Vue实现的父组件向子组件传值功能示例
Jan 19 Javascript
javascript 设计模式之享元模式原理与应用详解
Apr 08 Javascript
JavaScript oncopy事件用法实例解析
May 13 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
Oct 30 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
Web程序工作原理详解
2014/12/25 PHP
CI(Codeigniter)的Setting增强配置类实例
2016/01/06 PHP
PHP中数组转换为SimpleXML教程
2019/01/27 PHP
PHP哈希表实现算法原理解析
2020/12/11 PHP
javascript编程起步(第五课)
2007/01/10 Javascript
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
2007/05/30 Javascript
告诉大家什么是JSON
2008/06/10 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
Javascript基础教程之break和continue语句
2015/01/18 Javascript
js重写方法的简单实现
2016/07/10 Javascript
浅谈react.js 之 批量添加与删除功能
2017/04/17 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
原生JavaScript实现todolist功能
2018/03/02 Javascript
解析vue路由异步组件和懒加载案例
2018/06/08 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
js实现无缝轮播图
2020/03/09 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
2020/04/23 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
Python Web开发模板引擎优缺点总结
2014/05/06 Python
Python创建系统目录的方法
2015/03/11 Python
在Python中操作字符串之startswith()方法的使用
2015/05/20 Python
Python中用altzone()方法处理时区的教程
2015/05/22 Python
Python之os操作方法(详解)
2017/06/15 Python
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
Python猜数字算法题详解
2020/03/01 Python
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
俄罗斯珠宝市场的领导者之一:Бронницкий ювелир
2019/10/02 全球购物
如何开发安全的AJAX应用
2014/03/26 面试题
人力资源行政经理自我评价
2013/10/23 职场文书
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
大堂副理的岗位职责范文
2014/02/17 职场文书
实习单位鉴定意见
2015/06/04 职场文书
中小学生安全教育观后感
2015/06/17 职场文书
Python获取百度热搜的完整代码
2021/04/07 Python
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis
码云(gitee)通过git自动同步到阿里云服务器
2022/12/24 Servers