Canvas画布基本功能及实现网页签名功能
canvas 简介
<canvas> 是 HTML5 新增的,一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画,甚至可以进行实时视频处理和渲染。和所有 DOM 元素一样,拥有自己的属性、方法和事件,其中包含绘图的方法。
它最初由苹果内部使用自己 MacOS X WebKit 推出,供应用程序使用像仪表盘的构件和 Safari 浏览器使用。后来,有人通过 Gecko 内核的浏览器 (尤其是 Mozilla和Firefox),Opera 和 Chrome 和超文本网络应用技术工作组建议为下一代的网络技术使用该元素。
Canvas 是由 HTML 代码配合高度和宽度属性而定义出的可绘制区域。JavaScript 代码可以访问该区域,类似于其他通用的二维 API,通过一套完整的绘图函数来动态生成图形。通过 JavaScript 脚本可以调用绘图 API 在网页上完成绘图功能。
Canvas 是 HTML5 中最强大的特性之一。允许开发者使用动态和交互的方法,在 Web 上实现桌面应用程序的功能。
Mozilla 程序从 Gecko 1.8 (Firefox 1.5) 开始支持 <canvas>, Internet Explorer 从 IE9 开始 <canvas> 。Chrome 和 Opera 9+ 也支持 <canvas>。
Canvas 是 HTML5 新推出的元素标签,用户图形绘制。
canvas基本使用
Canvas 元素可以在网页中创建一个空白的矩形区域。
通过 API(JavaScript)可以操作这个区域。
默认情况下,创建的 Canvas 元素没有边框和内容。
<canvas id="canvasBox" width="" height=""></canvas>
<!--
注解:canvas必须是闭合标签</canvas>不可省,如果省略文档的其他内容将不会显示
只有两个属性width和height如果没用设置宽高默认宽300高150-->
js文件中:
const canvasBox=document.querySelector("#canvasbox");//获取画布元素
const ctx=canvasBox.getContext(contextType);
/*获取渲染上下文(具备了绘制和处理展示内容的能力)
contextType参数有
2d:绘制2d图像(创建一个CanvasRenderingContext2D对象作为2d渲染的上下文)
webgl(experimental-webgl)、webgl2:绘制3d图像(实验性)
bitmaprenderer:把位图绘制在canvas上下文上(实验性)
*/
下面是 Canvas 的基本方法:
获取 Canvas 上下文对象
使用 canvas.getContext('2d')
方法可以获取绘图上下文对象,例如:
const canvas = document.getElementById('mycanvas');
const ctx = canvas.getContext('2d');
绘制形状及填充颜色
使用绘图上下文对象的 fillRect()
或 strokeRect()
方法添加矩形,使用 fill()
或 stroke()
填充或者描边形状;使用 fillStyle
或 strokeStyle
属性设置形状内部或外部的颜色,例如:
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 100);
绘制图像
使用 drawImage()
方法绘制图像,它可以将图片、画布或视频作为图像绘制到画布上,例如:
const img = new Image();
img.onload = function() {ctx.drawImage(img, 0, 0);
}
img.src = 'example.png';
绘制文本
使用 fillText()
或 strokeText()
方法绘制文本,例如:
ctx.font = '20px Arial';
ctx.fillText('Hello World!', 50, 50);
绘制路径
使用 beginPath()
开始路径,然后使用 moveTo()
移动当前点,使用 lineTo()
、 arc()
或 quadraticCurveTo()
创建路径,最后使用 fill()
或 stroke()
方法绘制路径,例如:
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(50, 50);
ctx.stroke();
以上是 Canvas 的基本方法,还有很多高级的方法可以用于绘制复杂图形或动画,这里就不一一说了,具体可以去看看api。
Canvas示例:实现网页签名功能
开发中,偶尔会遇到签名功能,使用 Canvas 可以方便地实现签名功能,以下是一个简单的示例:
HTML 代码:
<div><canvas id="signatureCanvas" width="300" height="200"></canvas><button onclick="clearSignature()">清除</button><button onclick="saveSignature()">保存</button>
</div>
JavaScript 代码:
const canvas = document.getElementById('signatureCanvas');
const ctx = canvas.getContext('2d');let isDrawing = false;
let lastX, lastY;// 鼠标按下事件
function handleMouseDown(e) {isDrawing = true;[lastX, lastY] = [e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop];
}// 鼠标移动事件
function handleMouseMove(e) {if (!isDrawing) return; // 如果鼠标没有按下,则退出函数const x = e.clientX - canvas.offsetLeft;const y = e.clientY - canvas.offsetTop;ctx.beginPath();ctx.moveTo(lastX, lastY);ctx.lineTo(x, y);ctx.stroke();[lastX, lastY] = [x, y];
}// 鼠标释放事件
function handleMouseUp() {isDrawing = false;
}// 清除签名
function clearSignature() {ctx.clearRect(0, 0, canvas.width, canvas.height);
}// 保存签名
function saveSignature() {const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);// 将图片数据转换成 base64 格式const base64ImageData = canvas.toDataURL();console.log(base64ImageData);
}// 绑定事件
canvas.addEventListener('mousedown', handleMouseDown);
canvas.addEventListener('mousemove', handleMouseMove);
canvas.addEventListener('mouseup', handleMouseUp);
一个简单的签名功能就实现了:
上述代码使用 Canvas 绘图 API,监听鼠标按下、移动和释放的事件,并在鼠标移动时绘制签名。同时也提供了清除签名和保存签名功能。其中,ctx.getImageData()
函数可以获取到画布中的图片数据,可以将其转换成 base64
格式,以便于保存。
Canvas画布基本功能及实现网页签名功能相关推荐
- 微信小程序canvas实现签名功能
微信小程序canvas实现签名功能 在微信小程序项目中,开发模块涉及到手写签名功能,微信小程序canvas闪亮登场 文章目录 微信小程序canvas实现签名功能 前言 一.微信小程序canvas实现签 ...
- vue canvas 方法无效_vue实现手机app手写签名功能
我曾经在一个文书交互相关的项目中遇到过这样的一个需求,当用户接收到管理员发送的文书时,用户需要在这个文书上签字签收,签名需要跟原有的文书进行合并,做到模仿线下真实签收的电子签名.这签收没有调用APP特 ...
- 用Canvas画布展示出3D效果的网页源码
大家好,今天给大家介绍一款,用Canvas画布展示出3D效果的网页源码(图1).送给大家哦,获取方式在本文末尾. 图1 每次点击页面中间的卡片,就会触发3d旋转特效(图2) 图2 源码预览, < ...
- canvas画布制作签名
使用canvas画布绘制签名,可撤回上一步.重新绘画.保存签名到电脑,先看效果.... 一.基本结构 <template><div class="signature&quo ...
- html5 移动端手写签名,H5移动端项目实现手写签名功能 vue实现手写签名
vue 移动端实现手写签名效果,功能很完美,保存时保存为base64格式. 刚好项目用到此功能,就网上找了一下,清理了无用代码,简单方便,因为项目中多个地方需要使用,所以我将它整理为组件,通过ref和 ...
- android 手写签批_Android自定义实现手写签名功能
一.Android自定义View步骤 : 自定义属性: 选择和设置构造方法: 重写onMeasure()方法: 重写onDraw()方法: 重写onLayout()方法: 重写其他事件的方法(滑动监听 ...
- H5 VUE实现手机签名功能
H5 VUE实现手机签名功能 功能描述: 利用canvas实现手机签名转化成图片( 包含重绘,由于手机全屏展示 所以还添加了图片翻转) 上传后台 功能展示: 这里是封装了一个小组件 废话不多说上代码: ...
- H5移动端项目实现手写签名功能 vue实现手写签名
vue 移动端实现手写签名效果,功能很完美,保存时保存为base64格式. base64转file文件格式 vue中将base64转file文件格式 刚好项目用到此功能,就网上找了一下,清理了无用代码 ...
- 前端实现可绘制的canvas画布_JS前端基于canvas给图片添加水印
前两天给个人网站添加了一个小功能,就是在文章编辑上传图片的时候自动给图片加上水印.给网页图片添加水印是个常见的功能,也是互联网内容作者保护自己版权的方法之一.本文简单记录一下借助canvas在前端实现 ...
最新文章
- Hibernate二级缓存与查询缓存的组合探究
- Runnable接口介绍(中文文档)
- Java多线程的几种实现方法
- c++ template(4)基本技巧
- GUI阅读字号和触点面积设计 (可用性设计)
- Html5开发之链接标签nav的用法
- 【复赛前排分享(三)】高手上场第一招,这些赛事技巧你掌握了吗?
- Windows Server 2012 将资源发布到 AD DS
- Bailian2976 Bailian1936 All in All【字符串匹配】
- 茶余饭后聊Spring 一
- 23种设计模式及案例整理分享(建议收藏)
- 写web项目时出现的错误:来自“http://localhost:63342/Demo/test01/day0618/css/a.css”的资源已被阻止,因为 MIME 类型(“text/html”)
- matlab设置图片名称,如何在matlab中批量修改图片名称
- 100个优秀jQuery插件精选
- MFC TabControl插件 子对话框调用主对话框功能函数和变量
- GitExtensions 设置
- UPDATE和DELETE
- 小学四则运算生成器(Java实现)
- Android Paint的使用详解
- excel 用公式查找单元格