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) 开始支持 , Internet Explorer 从 IE9 开始 。Chrome 和 Opera 9+ 也支持

Canvas 是 HTML5 新推出的元素标签,用户图形绘制。

canvas基本使用

     Canvas 元素可以在网页中创建一个空白的矩形区域。

  通过 API(JavaScript)可以操作这个区域。

  默认情况下,创建的 Canvas 元素没有边框和内容。



        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() 填充或者描边形状;使用 fillStylestrokeStyle 属性设置形状内部或外部的颜色,例如:

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 代码:

 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画布基本功能及实现网页签名功能_第1张图片

上述代码使用 Canvas 绘图 API,监听鼠标按下、移动和释放的事件,并在鼠标移动时绘制签名。同时也提供了清除签名和保存签名功能。其中,ctx.getImageData() 函数可以获取到画布中的图片数据,可以将其转换成 base64 格式,以便于保存。

你可能感兴趣的:(开发语言,javascript,前端)