当前位置：首页 > 行业动态 > 正文

html5的2d图片

HTML5 2D图片通过Canvas API实现，支持绘制与操作图像，具备逐像素控制能力，跨平台兼容且无需插件，适合动态交互式图形开发

HTML5 2D 图片基础

HTML5 的 <canvas> 元素是实现 2D 绘图的核心工具，通过 JavaScript 操作其渲染上下文（CanvasRenderingContext2D）完成图形绘制,以下是关键知识点：

html5的2d图片 第1张

Canvas 基础用法

属性/方法 说明
getContext('2d') 获取 2D 渲染上下文对象
width/height 设置画布尺寸（单位像素），修改后会清空画布内容
toDataURL() 导出为 Base64 编码的图片数据 
const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');
canvas.width = 300;
canvas.height = 150;

基础绘图方法

方法 功能
fillRect(x,y,w,h) 填充矩形（x,y 为左上角坐标）
strokeRect(x,y,w,h) 描边矩形
clearRect(x,y,w,h) 清除指定区域像素
beginPath() 开始新路径
moveTo(x,y) 移动画笔到起点
lineTo(x,y) 绘制直线到指定坐标
arc(x,y,r,sAngle,eAngle) 绘制圆弧（x,y 为圆心，r 半径，角度单位弧度）
closePath() 闭合当前路径
fill() 填充当前路径
stroke() 描边当前路径 
// 绘制红色矩形和蓝色路径三角形
ctx.fillStyle = 'red';
ctx.fillRect(10,10,100,50);
ctx.strokeStyle = 'blue';
ctx.beginPath();
ctx.moveTo(120,10);
ctx.lineTo(170,10);
ctx.lineTo(145,60);
ctx.closePath();
ctx.stroke();

文本与样式

属性/方法 说明
font 设置字体（如 16px Arial）
fillStyle 填充颜色（支持 CSS 颜色值）
strokeStyle 描边颜色
textAlign 水平对齐方式（left/center/right）
textBaseline 垂直对齐方式（top/middle/bottom）
fillText(text,x,y) 填充文本
createLinearGradient(x1,y1,x2,y2) 创建线性渐变对象
createRadialGradient(x1,y1,r1,x2,y2,r2) 创建径向渐变对象 
// 渐变文字
const gradient = ctx.createLinearGradient(0,0,0,50);
gradient.addColorStop(0,'blue');
gradient.addColorStop(1,'white');
ctx.font = '24px sans-serif';
ctx.fillStyle = gradient;
ctx.fillText('Hello Canvas',10,80);

图像处理

方法 功能
drawImage(img,x,y) 绘制图像（img 可为 <img> 元素或图像对象）
drawImage(img,x,y,w,h) 按指定宽高绘制图像
getImageData(x,y,w,h) 获取指定区域像素数据（返回 ImageData 对象）
putImageData(imageData,x,y) 将像素数据绘制到画布 
const img = new Image();
img.src = 'example.jpg';
img.onload = () => {
  // 等比例缩放绘制
  const scale = Math.min(canvas.width/img.width, canvas.height/img.height);
  ctx.drawImage(img,0,0,img.widthscale,img.heightscale);
};

高级应用案例

动态粒子效果

function drawParticles(particles){
  ctx.clearRect(0,0,canvas.width,canvas.height);
  particles.forEach(p => {
    ctx.fillStyle = p.color;
    ctx.beginPath();
    ctx.arc(p.x,p.y,p.size,0,Math.PI2);
    ctx.fill();
  });
}

图像像素级操作

// 灰度化处理
const imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
for(let i=0; i<imageData.data.length; i+=4){
  const avg = (imageData.data[i]+imageData.data[i+1]+imageData.data[i+2])/3;
  imageData.data[i] = imageData.data[i+1] = imageData.data[i+2] = avg;
}
ctx.putImageData(imageData,0,0);

常见问题与解答

Q1：Canvas 绘制的图形模糊怎么办？
A：需开启设备像素比适配，在设置画布尺寸前添加： 

const dpr = window.devicePixelRatio || 1;
canvas.width = 300  dpr;
canvas.height = 150  dpr;
ctx.scale(dpr, dpr);

Q2：如何实现画布内容动态导出为图片？
A：使用 toDataURL 方法： 

const dataURL = canvas.toDataURL('image/png'); // 可指定 'image/jpeg' 等格式
const link = document.createElement('a');
link.href = dataURL;
link.download = 'canvas-image.png';
link
2D
0

相关文章