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中获取选中对象的类型
Apr 02 Javascript
window.open不被拦截的实现代码
Aug 22 Javascript
全面详细的jQuery常见开发技巧手册
Feb 21 Javascript
JS实战篇之收缩菜单表单布局
Dec 10 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
Dec 14 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
Mar 10 Javascript
js动态引入的四种方法
May 05 Javascript
微信jssdk逻辑在vue中的运用详解
Nov 14 Javascript
JS异步错误捕获的一些事小结
Apr 26 Javascript
小程序云开发获取不到数据库记录的解决方法
May 18 Javascript
VScode格式化ESlint方法(最全最好用方法)
Sep 10 Javascript
15分钟学会vue项目改造成SSR(小白教程)
Dec 17 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危险函数(disable_functions)
2012/02/23 PHP
PHP读取大文件末尾N行的高效方法推荐
2016/06/03 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
PHP后台备份MySQL数据库的源码实例
2019/03/18 PHP
Iframe thickbox2.0使用的方法
2009/03/05 Javascript
js中格式化日期时间型数据函数代码
2010/11/08 Javascript
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
jquery新的绑定事件机制on方法的使用方法
2014/04/15 Javascript
PHP PDO操作总结
2014/11/17 Javascript
react router 4.0以上的路由应用详解
2017/09/21 Javascript
Node实战之不同环境下配置文件使用教程
2018/01/02 Javascript
Nuxt.js踩坑总结分享
2018/01/18 Javascript
在vue项目中优雅的使用SVG的方法实例详解
2018/12/03 Javascript
JavaScript工具库之Lodash详解
2019/06/15 Javascript
Javascript实现鼠标点击冒泡特效
2019/12/24 Javascript
序列化模块json代码实例详解
2020/03/03 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
2020/10/24 Javascript
[03:20]次级联赛厮杀超职业 现超级兵对拆世纪大战
2014/10/30 DOTA
在Docker上开始部署Python应用的教程
2015/04/17 Python
python数据预处理之将类别数据转换为数值的方法
2017/07/05 Python
python实现简单中文词频统计示例
2017/11/08 Python
Python中对数组集进行按行打乱shuffle的方法
2018/11/08 Python
pytorch nn.Conv2d()中的padding以及输出大小方式
2020/01/10 Python
pytorch 彩色图像转灰度图像实例
2020/01/13 Python
python_array[0][0]与array[0,0]的区别详解
2020/02/18 Python
解决Python在导入文件时的FileNotFoundError问题
2020/04/10 Python
利用python对mysql表做全局模糊搜索并分页实例
2020/07/12 Python
捷克鲜花配送:Florea.cz
2018/10/29 全球购物
中国电子产品批发商/跨境电商/外贸网:Sunsky-online
2020/04/20 全球购物
学习自我鉴定
2014/02/01 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
2014年英语教学工作总结
2014/12/17 职场文书
护士个人总结范文
2015/02/13 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
python实现A*寻路算法
2021/06/13 Python
Nginx如何配置根据路径转发详解
2022/07/23 Servers