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 相关文章推荐
JS正则中的RegExp对象对象
Nov 07 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
Jan 31 Javascript
JavaScript父子窗体间的调用方法
Mar 31 Javascript
分享10个原生JavaScript技巧
Apr 20 Javascript
jquery实现表单输入时提示文字滑动向上效果
Aug 10 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
Nov 17 Javascript
Three.js利用性能插件stats实现性能监听的方法
Sep 25 Javascript
详解vue中localStorage的使用方法
Nov 22 Javascript
vue路由中前进后退的一些事儿
May 18 Javascript
微信小程序 组件的外部样式externalClasses使用详解
Sep 06 Javascript
react中useState使用:如何实现在当前表格直接更改数据
Aug 05 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
某大型网络公司应聘时的笔试题目附答案
2008/03/27 PHP
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
php使用Header函数,PHP_AUTH_PW和PHP_AUTH_USER做用户验证
2016/05/04 PHP
php常用经典函数集锦【数组、字符串、栈、队列、排序等】
2019/08/23 PHP
Aliyun Linux 编译安装 php7.3 tengine2.3.2 mysql8.0 redis5的过程详解
2020/10/20 PHP
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
2009/08/04 Javascript
javascript奇异的arguments分析
2010/10/20 Javascript
node.js中的http.response.writeHead方法使用说明
2014/12/14 Javascript
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
2016/05/10 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
2016/05/12 Javascript
浅谈Javascript中的12种DOM节点类型
2016/08/19 Javascript
JS敏感词过滤代码
2016/12/23 Javascript
WebPack基础知识详解
2017/01/16 Javascript
Bootstrap路径导航与分页学习使用
2017/02/08 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
2017/04/22 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
2017/12/14 Javascript
详解如何在React组件“外”使用父组件的Props
2018/01/12 Javascript
小程序获取周围IBeacon设备的方法
2018/10/31 Javascript
使用javascript做时间倒数读秒功能的实例
2019/01/23 Javascript
nodejs简单抓包工具使用详解
2019/08/23 NodeJs
vue获取form表单的值示例
2019/10/29 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
2019/12/09 Javascript
python图片验证码生成代码
2016/07/02 Python
python with提前退出遇到的坑与解决方案
2018/01/05 Python
Python iter()函数用法实例分析
2018/03/17 Python
对numpy中array和asarray的区别详解
2018/04/17 Python
Python骚操作之动态定义函数
2019/03/26 Python
python错误调试及单元文档测试过程解析
2019/12/19 Python
pytorch实现Tensor变量之间的转换
2020/02/17 Python
CSS3贝塞尔曲线示例:创建链接悬停动画效果
2020/11/19 HTML / CSS
MIKI HOUSE美国官方网上商店:日本领先的婴儿和儿童高级时装品牌
2020/06/21 全球购物
预备党员转正考核材料
2014/06/03 职场文书
新闻人物通讯稿
2014/10/09 职场文书
投资申请报告
2015/05/19 职场文书
详解CocosCreator项目结构机制
2021/04/14 Javascript