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 相关文章推荐
javascript 选择文件夹对话框(web)
Jul 07 Javascript
JQuery实现的在新窗口打开链接的方法小结
Apr 22 Javascript
浅谈Javascript面向对象编程
Nov 15 Javascript
js之onload事件的一点使用心得
Aug 14 Javascript
详解AngularJS的通信机制
Jun 18 Javascript
JS实现带鼠标效果的头像及文章列表代码
Sep 27 Javascript
jQuery获取radio选中项的值实例
Jun 18 Javascript
AngularJS基础 ng-repeat 指令简单示例
Aug 03 Javascript
Node.js实现兼容IE789的文件上传进度条
Sep 02 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
Apr 09 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
Aug 28 Javascript
微信小程序实现轮播图指示器
Jun 25 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函数
2006/12/06 PHP
php给每个段落添加空格的方法
2015/03/20 PHP
PHP实现全角字符转为半角方法汇总
2015/07/09 PHP
php遍历解析xml字符串的方法
2016/05/05 PHP
php实现的支付宝网页支付功能示例【基于TP5框架】
2019/09/16 PHP
删除条目时弹出的确认对话框
2014/06/05 Javascript
Node.js中对通用模块的封装方法
2014/06/06 Javascript
jQuery实现冻结表头的方法
2015/03/09 Javascript
javascript实现添加附件功能的方法
2015/11/18 Javascript
jQuery插件Validate实现自定义校验结果样式
2016/01/18 Javascript
jquery获取img的src值的简单实例
2016/05/17 Javascript
Javascript中常用类型的格式化方法小结
2016/12/26 Javascript
JS实现iframe自适应高度的方法示例
2017/01/07 Javascript
微信端开发--登录小程序步骤
2017/01/11 Javascript
JS查找字符串中出现最多的字符及个数统计
2017/02/04 Javascript
使用jQuery.Pin垂直滚动时固定导航
2017/05/24 jQuery
Angular 4依赖注入学习教程之组件服务注入(二)
2017/06/04 Javascript
JS和JQuery实现雪花飘落效果
2017/11/30 jQuery
Nodejs连接mysql并实现增、删、改、查操作的方法详解
2018/01/04 NodeJs
详解如何在微信小程序开发中正确的使用vant ui组件
2018/09/13 Javascript
原生JS实现图片懒加载之页面性能优化
2019/04/26 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
2019/11/25 Javascript
Vue实现指令式动态追加小球动画组件的步骤
2020/12/18 Vue.js
《与孩子一起学编程》python自测题
2018/05/27 Python
Django网络框架之创建虚拟开发环境操作示例
2019/06/06 Python
Python如何使用argparse模块处理命令行参数
2019/12/11 Python
python3 动态模块导入与全局变量使用实例
2019/12/22 Python
python使用matplotlib的savefig保存时图片保存不完整的问题
2021/01/08 Python
CSS实现定位元素居中的方法
2015/06/23 HTML / CSS
涉外文秘个人求职的自我评价
2013/10/07 职场文书
销售高级职员求职信
2013/10/29 职场文书
三月法制宣传月活动总结
2014/07/03 职场文书
月度优秀员工获奖感言
2014/08/16 职场文书
工作失职自我检讨书
2015/05/05 职场文书
Python趣味实战之手把手教你实现举牌小人生成器
2021/06/07 Python
Redis基本数据类型Zset有序集合常用操作
2022/06/01 Redis