HTML5高阶实例之Canvas实现一个画板(手写板)

最新推荐文章于 2023-11-15 13:56:57 发布
最新推荐文章于 2023-11-15 13:56:57 发布
阅读量1.7k 收藏 3
点赞数 1
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wanshaobo888/article/details/79591695
版权
最新更新时间：2018年3月17日14:24:36
《猛戳-查看我的博客地图-总有你意想不到的惊喜》
1、用canvas元素实现一个画板

代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>canvas自定义画板</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    #container{
        margin: 0 auto;
        width: 600px;
        /*text-align: center;*/
    }
    #canvas{
        border: 2px solid #ff6700;
        cursor:crosshair;
        /*不能用这种方式给canvas设置宽高*/
        /*width: 600px;*/
        /*height: 300px;*/
    }
    .btn{
        width:70px;
        height: 40px;
        border-radius: 10px;
        border: 1px solid #aaa;/*去掉<button>默认边框*/
        outline:none;/*去掉<button>选中时的默认边框*/
    }
    #image_png{
        width: 300px;
        height: 150px;
        border:  2px solid #ff6700;
        display: block;
        margin: 10px auto;
     }
    .section{
        margin-top: 10px;
    }
    .info{
        color: #f0f;
        font-size: 14px;
    }
    .bg{
        background: #ff6700;
    }
    .fw{
        font-weight: 700;
    }
</style>
<body>
<div id="container">
    <canvas id="canvas" width="600" height="300">浏览器不支持canvas<!-- 如果不支持会显示这段文字 --></canvas>
    <div class="section">
        <span class="info">选择画笔颜色：</span>
        <button class="btn colorBtn fw" style="background-color:yellow;" onclick='setPenColor("yellow");'>YELLOW</button>
        <button class="btn colorBtn" style="background-color:red;" onclick='setPenColor("red");'>RED</button>
        <button class="btn colorBtn" style="background-color:blue;" onclick='setPenColor("blue");'>BLUE</button>
        <button class="btn colorBtn" style="background-color:green;" onclick='setPenColor("green");'>GREEN</button>
        <button class="btn colorBtn" style="background-color:black;color:#fff" onclick='setPenColor("black");'>BLACK</button>
    </div>
    <div class="section">
        <span class="info">选择橡皮擦：</span>
        <button class="btn colorBtn" style="background-color:white;" onclick='setPenColor("white");'>WHITE</button>
    </div>
    <div class="section">
        <span class="info">选择画笔大小：</span>
        <button class="btn bg penBtn fw" onclick="setPenWidth(4);">4PX</button>
        <button class="btn bg penBtn" onclick="setPenWidth(8);">8PX</button>
        <button class="btn bg penBtn" onclick="setPenWidth(16);">16PX</button>
    </div>
    <div class="section">
        <span class="info">输出画板内容到下面的图片：</span>
        <button class="btn" onclick="createImage();">EXPORT</button>
    </div>
    <img id="image_png">
</div>
</body>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
    var canvas = document.getElementById('canvas'); //获取canvas标签
    var ctx = canvas.getContext("2d");//创建 context 对象
    ctx.fillStyle = "#ff7777";//画布背景色
    ctx.fillRect(0,0,600,300);//在画布上绘制 600x300 的矩形，从左上角开始 (0,0)
    var penClick = false; //画笔按下标记
    var startAxisX = 0;
    var startAxisY = 0;
    var penColor = "yellow";//画笔颜色
    var penWidth = 4;//画笔粗细
    //画笔颜色选中状态
    $(".colorBtn").on("click", function(event){
        $(".colorBtn").removeClass('fw')
        $(this).addClass('fw')
    });
    //画笔粗细选中状态
    $(".penBtn").on("click", function(event){
        $(this).addClass('fw').siblings().removeClass('fw')
    });
    //设置画笔颜色
    function setPenColor(color){
        penColor = color;
    }
    //设置画笔粗细
    function setPenWidth(type){
        penWidth = type
    }
    canvas.addEventListener("mousemove",drawing,true); //鼠标移动事件
    canvas.addEventListener("mousedown",penDown,false); //鼠标按下事件
    canvas.addEventListener("mouseup",penUp,false); //鼠标弹起事件
    function penDown(event){
        penClick = true;
        startAxisX = event.pageX;
        startAxisY = event.pageY;
    }
    function penUp(){
        penClick = false;
    }
    function drawing(event){
        if(!penClick)
                return;
        var stopAxisX = event.pageX;
        var stopAxisY = event.pageY;
        ctx.beginPath();
        //由于整体设置了水平居中，因此需要做特殊处理：window.screen.availWidth/2 -300
        ctx.moveTo(startAxisX-(window.screen.availWidth/2 -300),startAxisY);//moveTo(x,y) 定义线条开始坐标
        ctx.lineTo(stopAxisX-(window.screen.availWidth/2 -300),stopAxisY);//lineTo(x,y) 定义线条结束坐标
        ctx.strokeStyle = penColor;
        ctx.lineWidth = penWidth;
        ctx.lineCap = "round";
        ctx.stroke();// stroke() 方法来绘制线条
        startAxisX = stopAxisX;
        startAxisY = stopAxisY;
    }
    function createImage() {
        var img_png_src = canvas.toDataURL("image/png"); //将画板保存为图片格式的函数
        console.log('=====',img_png_src);//data:image/png;base64,iVBOR.....
        document.getElementById("image_png").src = img_png_src;
    }
</script>
</html>

作品如下

空白画板

这里写图片描述

填充内容的画板

这里写图片描述

感谢阅读，欢迎评论^-^

打赏我吧^-^

万少博
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
毛笔刷画板Canvas特效
06-24
毛笔刷画板Canvas特效是一款毛笔笔刷绘画写字动画特效。
HTML5 Canvas鼠标跟随特效 可实现HTML5画板
04-16
解压密码：RJ4587 这次我们要再来分享一款很酷的HTML5 Canvas动画，这种动画类型是我们未曾分享过的，这是一款可以跟随鼠标移动的动画特效，其效果酷似大仙在泼墨作画，右上角的配置框中可以配置笔刷的大小和颜色，可以做一款很不错的HTML5网页画板。
canvas实现的画板
05-18
用html5的canvas实现的一个简易的画板，可以画直线、矩形、圆形，可以选择线条粗细和线条颜色’
Javascript HTML5 Canvas实现的一个画板
10-22
主要介绍了Javascript HTML5 Canvas实现的一个画板的相关资料,需要的朋友可以参考下
移动端 jquery+html5 手写签名（横屏）
12-27
用jquery+html5+css3实现移动端的手动签名，横屏签名，完美回显，可直接复用
Canvas—从入门到案例实现
最新发布
weixin_43599321的博客
11-15 116
canvas是一个可以使用脚本（通常是JavaScript）来绘制图形的HTML元素，通过本篇博客，你将学习到canvas的基本使用，并且本文会通过两个综合案例实践练习canvas。
web前端手册
caiqian97的博客
08-28 1578
HTML基础 1. HTML 文件中的 DOCTYPE 是什么作用？ HTML超文本标记语言: 是一个标记语言, 就有对应的语法标准 DOCTYPE 即 Document Type，网页文件的文档类型标准。 主要作用是告诉浏览器的解析器要使用哪种 HTML规范 或 XHTML规范 来解析页面。 DOCTYPE 需要放置在 HTML 文件的 <html>标签之前，如： <!DOCTYPE html> <html> ... </html> (目前主流) &
校招面试冲刺
weixin_45221036的博客
08-24 1642
HTML 1】语义化： 尽可能少的使用无语义的标签div和span 在语义化不明显时，尽量使用p标签，因为p在默认情况下有上下间距 需要强调的文本，可以包含在strong或em标签中，strong默认样式是加粗（不要用b），em是斜体（不要用i） 什么是语义化？就是用合理、正确的标签来展示内容，比如h1~h6定义标题。 <header>定义文档或者文档的部分区域的页眉，应作为介绍内容或者导航链接栏的容器。 <nav>描述一个含有多个超链接的区域，该区域包含跳转到其他页
美团前端二面必会手写面试题汇总
helloworld1024fd的博客
10-10 658
考点： 数组去重方法汇总 1. 双层 for 循环 2. Array.filter() 加 indexOf/includes 3. ES6 中的 Set 去重 4. reduce 实现对象数组去重复 实现观察者模式 观察者需要放到被观察者中，被观察者的状态变化需要通知观察者 我变化了 内部也是基于发布订阅模式，收集观察者，状态变化后要主动通知观察者 实现一个链表结构 链表结构看图理解next层级 参考前端手写面试题详细解答第一版 时间复杂度为 O(n^2) 第二版 标记法 / 自定义属性法 时间
html5 canvas 简单画板实现代码
12-14
效果图：注：下面的代码运行效果，请在支持html5浏览下执行，才能看到效果。 <!doctype html> <html> <head> <title>canvas简单画板</title> <style type=”text/css”> #can{ ...
用canvas写一个画板手写板
08-10
用canvas写一个画板（手写板）
HTML5+canvas实现的画板功能特效代码
03-20
HTML5+canvas实现的画板功能代码
JavaScript+Canvas实现自定义画板的示例代码
12-13
以下使用JavaScript结合Canvas实现一个画板功能 效果演示图： 代码部分（直接复制便可使用） <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>JavaScript+Canvas实现...
HTML5 canvas写字板涂鸦画板特效代码
03-20
HTML5 canvas写字板涂鸦画板基于jquery.1.11.3.min.js制作，可自由绘画，有保存、下载、撤销、满屏、线条、橡皮等功能。
html5制作手写板，canvas这样学还能不会？
weixin_43298663的博客
11-10 310
技术要点 首先用canvas绘制一个米字格，然后获取到鼠标按下去后的那个点在canvas里面的X和Y坐标的值，以及鼠标移动后的那个点在canvas里面的X和Y坐标的值，然后调用stroke方法直接绘制即可。代码里面的lineCap="round"和lineJoin="round"可以让线看起来更圆润，否则会出现断层。 代码 ...
jSignature 横屏手写签名
weixin_53105591的博客
11-09 253
开发问题：横屏手写板书写的base64导出的图片是竖直的，我这里想变成横版显示，就修改了下生成的base64。开发需求：移动端竖屏手写板太小了，想做一个横屏的手写板。
使用canvas实现画板功能
qq_44947708的博客
09-21 1465
1、canvas是什么？ 画布、用于绘制图像 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>你画我猜</title> <link rel="stylesheet" type="text/css" href="css/s...
HTML知识总结
sun12345678_的博客
07-12 525
HTML5它致力于解决跨浏览器问题，可以部分取 代JavaScript(标签封装了某些行为),也致力于把浏览器变成一个前端执行开发环境，而不是简单的视图 呈现工具。网站域名：访问网站所用的网址，如metinfo.cn;网站程序：包括用户浏览网站所看到的页面和网站后台管理程序，现在一般都是用成熟的网站管理 系统。网站空间：可以是虚拟主机或服务器，用于存储网站程序及资料，并提供网站程序运行所需要的环境。
用canvas实现一个画板
04-21
好的，下面是实现一个画板的代码： ``` <!DOCTYPE html> <html> <title>Canvas 画板 #canvas { border: 1px solid #000; } <canvas id="canvas" width="400" height="400"></canvas> var ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值