Master canvas skills: Become a canvas expert and control it easily

Master the Canvas method: Become an expert in the Canvas method and master it freely. Specific code examples are required

Introduction:
Canvas is provided by HTML5 for displaying on the page Powerful elements for drawing images. With Canvas, we can use JavaScript to draw graphics, create animations, and perform image processing. Mastering the Canvas method will allow us to fully unleash our creativity and achieve rich and varied visual effects. This article will introduce some commonly used Canvas methods and provide corresponding code examples to help readers become experts in Canvas methods.

1. Draw basic shapes

1. Draw a rectangle (rect)
   Use the rect() method to draw a rectangle and set the fill color and border color.
   Code example:

   const canvas = document.getElementById('myCanvas');
   const ctx = canvas.getContext('2d');
   
   ctx.fillStyle = 'red';     // 设置填充颜色为红色
   ctx.fillRect(10, 10, 100, 100);    // 绘制填充矩形
   
   ctx.strokeStyle = 'blue';   // 设置边框颜色为蓝色
   ctx.lineWidth = 2;    // 设置边框线宽为 2 像素
   ctx.strokeRect(50, 50, 100, 100);   // 绘制边框矩形

   Copy after login

2. Drawing path (path)
   Use the path drawing method to draw complex shapes, such as polylines, curves, etc.
   Code example:

   const canvas = document.getElementById('myCanvas');
   const ctx = canvas.getContext('2d');
   
   ctx.beginPath();   // 开始绘制路径
   ctx.moveTo(50, 50);   // 移动到起始点（50, 50）
   ctx.lineTo(100, 50);   // 绘制直线到点（100, 50）
   ctx.lineTo(100, 100);   // 继续绘制直线到点（100, 100）
   ctx.closePath();   // 结束路径
   ctx.fillStyle = 'yellow';   // 设置填充颜色为黄色
   ctx.fill();   // 填充路径

   Copy after login

2. Draw the image

1. Draw the image (drawImage)
   Use the drawImage() method to Draw images, such as pictures or video frames, on the Canvas.
   Code example:

   const canvas = document.getElementById('myCanvas');
   const ctx = canvas.getContext('2d');
   
   const img = new Image();
   img.src = 'image.jpg';   // 图片路径
   img.onload = () => {
     ctx.drawImage(img, 0, 0);   // 在坐标(0, 0)处绘制图像
   }

   Copy after login

2. Image processing (pixel operation)
   You can directly operate on the pixels of the image to achieve image processing effects, such as brightness adjustment and filter effects. wait.
   Code example:

   const canvas = document.getElementById('myCanvas');
   const ctx = canvas.getContext('2d');
   
   const img = new Image();
   img.src = 'image.jpg';   // 图片路径
   img.onload = () => {
     ctx.drawImage(img, 0, 0);   // 在坐标(0, 0)处绘制图像
     
     const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);   // 获取图像数据
     
     for (let i = 0; i < imageData.data.length; i += 4) {
    // 进行像素操作，例如调整亮度
    imageData.data[i] += 50;   // R 分量
    imageData.data[i + 1] += 50;   // G 分量
    imageData.data[i + 2] += 50;   // B 分量
     }
     
     ctx.putImageData(imageData, 0, 0);   // 将修改后的图像数据渲染到 Canvas 上
   }

   Copy after login

3. Create animation

Using Canvas, you can create smooth animations and achieve dynamic effects by continuously drawing graphics.

Code example:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

let x = 0;

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);   // 清空画布
  
  // 绘制移动的方块
  ctx.fillStyle = 'blue';
  ctx.fillRect(x, 50, 100, 100);
  
  x += 1;   // 更新方块的位置
  
  requestAnimationFrame(draw);   // 循环调用 draw()，创建动画效果
}

draw();

Conclusion:
This article introduces several commonly used Canvas methods, including drawing basic shapes, drawing images, and creating animations. By learning and practicing these methods, we can become experts in the Canvas method, flexibly use Canvas functions in web development, and create colorful visual effects. I hope that readers can deepen their understanding and mastery of the Canvas method through the sample code in this article, and further improve their skills in front-end development.

The above is the detailed content of Master canvas skills: Become a canvas expert and control it easily. For more information, please follow other related articles on the PHP Chinese website!