Canvas_绘制线段、圆形、文本、图像、视频、处理图像数据

2023-06-14 10:11:11 来源：博客园

(资料图片仅供参考)

Canvas_绘制线段、圆形、文本、图像、视频、处理图像数据

绘制线段

var canvas1 = document.querySelector("#canvas1");var ctx = canvas1.getContext("2d");// 设置开始路径ctx.beginPath()// 设置绘制的起始点ctx.moveTo(50, 50);// 设置经过某个位置ctx.lineTo(50, 300);ctx.lineTo(300, 300);ctx.lineTo(300, 250);// 设置结束路径ctx.closePath();// 绘制路径ctx.lineCap = "round"; // 起点和终点的路径线段的边缘设置为圆角// ctx.lineJoin = "round"; // 中途的路径线段（拐角）的边缘设置为圆角// 斜接// ctx.miterLimit = 1;ctx.strokeStyle = "black";ctx.lineWidth = 20;ctx.stroke();

绘制圆

var canvas1 = document.querySelector("#canvas1");var ctx = canvas1.getContext("2d");// 默认为false，是顺时针，true为逆时针ctx.arc(300, 300, 100, 0, 2*Math.PI, true);ctx.stroke();

绘制文本

var canvas1 = document.querySelector("#canvas1");var ctx = canvas1.getContext("2d");ctx.font = "20px 微软雅黑";ctx.shadowBlur = 20;ctx.shadowColor = "rgba(0, 0, 0)";ctx.shadowOffsetX = 10;ctx.shadowOffsetY = 10;ctx.fillText("Hello Canvas", 100, 100);ctx.strokeText("中午吃啥？", 100, 200);

绘制图像

图片裁剪、加水印...

var canvas1 = document.querySelector("#canvas1");var ctx = canvas1.getContext("2d");// 绘制图像// ctx.drawImage(图片对象，x位置，y位置)// ctx.drawImage(图片对象，x位置，y位置，宽度，高度)// ctx.drawImage(图片对象，图像裁剪的位置x，图像裁剪的位置y，裁剪的宽度，裁剪的高度，x位置，y位置，宽度，高度)var img = new Image()img.src = "./【PFAOS】首都ハイロック_全景_78953154.png";img.onload = function() {    ctx.drawImage(img, 50, 50, 600, 600);    ctx.font = "50px 微软雅黑";    ctx.fillText("水印", 450, 100);}

绘制视频

好处是不需要mp4格式，不会被别人盗

var video = document.querySelector("video");var canvas1 = document.querySelector("#canvas1");var ctx = canvas1.getContext("2d");video.onplay = function() {    interId = setInterval(function() {        ctx.drawImage(video, 0, 0, 800, 440);    }, 16);}video.onpause = function() {    clearInterval(interId);}// ctx.getImageData可以获取图片的数据// ctx.putImageData可以将图像数据放回画布上

图像数字处理

关键词：