キャンバス スキルをマスターする: キャンバスのエキスパートになって、キャンバスを簡単に制御します

Canvas メソッドをマスターする: Canvas メソッドのエキスパートになり、自由にマスターしてください。具体的なコード例が必要です。

はじめに:

1. 
   長方形 (rect) を描画する
   rect() メソッドを使用して長方形を描画し、塗りつぶしの色と境界線の色を設定します。 。

   コード例:

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);   // 绘制边框矩形

ログイン後にコピー

2. 
   パス (パス) の描画
   パス描画メソッドを使用して、ポリラインや曲線などの複雑な形状を描画します。

   コード例:

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();   // 填充路径

ログイン後にコピー

1. 
   画像を描画します (drawImage)
   drawImage() を使用します画像やビデオ フレームなどの画像をキャンバス上に描画するメソッドです。

   コード例:

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)处绘制图像
}

ログイン後にコピー

2. 
   画像処理 (ピクセル操作)
   画像のピクセルを直接操作して、明るさ調整やフィルターなどの画像処理効果を実現できます。エフェクトです。お待​​ちください。

   コード例:

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 上
}

ログイン後にコピー

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();

以上がキャンバス スキルをマスターする: キャンバスのエキスパートになって、キャンバスを簡単に制御しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。