JS+HTML5 Canvas实现简单的写字板功能示例

本文实例讲述了JS+HTML5 Canvas实现简单的写字板功能。分享给大家供大家参考，具体如下：

先来看运行效果：

具体代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>www.jb51.net 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.jb51.net/code/HtmlJsRun测试上述代码，亲身体验一下运行效果。

更多关于JavaScript相关内容还可查看本站专题：《JavaScript+HTML5特效与技巧汇总》、《JavaScript图形绘制技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • Javascript保存网页为图片借助于html2canvas库实现

    第一步,把网页保存为Canvas画布,借助于html2canvas库,http://html2canvas.hertzen.com/ html2canvas(document.getElementById("id1"), { onrendered: function(canvas) { document.getElementById("id2").appendChild(canvas);//生成画布后如何处理,当然可以在新标签打开,在浮层展示等等 }, canvas

  • JS+Canvas 实现下雨下雪效果

    JS+Canvas 实现下雨下雪效果

    最近做了一个项目,其中有需求要实现下雨小雪的动画特效,所以在此做了个drop组件,来展现这种canvas常见的下落物体效果.在没给大家介绍正文之前,先给大家展示下效果图: 展示效果图: 下雨 下雪 看起来效果还是不错的,相对于使用创建dom元素来制作多物体位移动画, 使用canvas会更加容易快捷,以及性能会更好 调用代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U

  • js使用html2canvas实现屏幕截取的示例代码

    整理文档,搜刮出一个js使用html2canvas实现屏幕截取的示例代码,稍微整理精简一下做下分享. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <

  • html5 canvas js(数字时钟)实例代码

    html5 canvas js(数字时钟)实例代码

    复制代码 代码如下: <!doctype html><html>    <head>        <title>canvas dClock</title>    </head>    <body>        <canvas id = "clock" width = "500px" height = "200px">            您的浏览

  • JavaScript+html5 canvas实现本地截图教程

    JavaScript+html5 canvas实现本地截图教程

    最近有时间了解了下html5的各API,发现新浪微博的头像设置是使用canvas实现截图的,加之前段时间了解了下html5的File API使用File API 之FileReader实现文件上传<JavaScript File API文件上传预览>,更加觉得html5好玩了,想着也试试写写这功能权当学习canvas吧. 下面奉上我自己写的一个demo,代码写得比较少,很多细节不会处理.如果有不得当的地方恳请指教,谢谢啦 ^_^ ^_^ 功能实现步奏: 一.获取文件,读取文件并生成url 二.

  • JS使用canvas中的measureText方法测量字体宽度示例

    JS使用canvas中的measureText方法测量字体宽度示例

    本文实例讲述了JS使用canvas中的measureText方法测量字体宽度.分享给大家供大家参考,具体如下: 工作项目中用到的东西,要限制一个容器的宽度,超过了这个宽度就要显示展开按钮,点击展开按钮要全部展示出来,可以用css的加省略号的那个,但是有时候这个还不行,我就自己想办法,突然想到canvas中有个measureText函数可以测量字体的宽度,于是我就想着用这个函数来测出句子的宽度来,然后和容器的宽度进行比较,这样就可以了,那我就来写个demo来演示一下如何测量 <!DOCTYPE h

  • js canvas实现写字动画效果

    本文实例为大家分享了js canvas实现写字动画效果展示的具体代码,供大家参考,具体内容如下 页面html: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>学写一个字</title> <script src="jquery-2.1.3.min.js" type="t

  • js+html5实现canvas绘制镂空字体文本的方法

    本文实例讲述了js+html5实现canvas绘制镂空字体文本的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> Your browser does not s

  • 在小程序Canvas中使用measureText的方法示例

    有时候我们在使用Canvas绘制一段文本时,会需要通过measureText()方法获取文本的宽度,例如: 创建canvas标签 <canvas id="canvas"></canvas> 获取一段文本的宽度 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var text = ctx.measureText('foo'); // TextMet

  • javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板

    js+html5 canvas实现的涂鸦画板特效,可调画笔颜色|粗细|橡皮,可以保存涂鸦效果为图片编码,非常适合学习html5的canvas,必须支持html5的浏览器才能看到效果. 复制代码 代码如下: <!doctype html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascri

随机推荐