Canvas绘制绘图，绘制坤坤图片并赋予色彩，让坤坤五彩缤纷起来！

2023-06-18 21:31:57

用 Canvas 绘制坤坤，点哪变哪色

给坤坤换装新衣，让你的世界更添色彩

嘿，各位 ikun，准备给坤坤换个新造型了吗？有了 Canvas，这个梦想不再遥不可及。Canvas 是 HTML5 的一员大将，它能让我们在网页上尽情挥洒创意，绘制各种各样的图形。今天，我们就来用 Canvas 为坤坤注入色彩，让他焕然一新，更加光彩夺目。

绘制坤坤靓影

第一步，当然是要把坤坤请上场。我们创建一个 Canvas 元素，然后用 JavaScript 的魔法，把坤坤的图片绘制上去。

// 创建画布
var canvas = document.createElement('canvas');
// 把画布加到页面里
document.body.appendChild(canvas);
// 获取画布的上下文，就像个画笔
var ctx = canvas.getContext('2d');
// 把坤坤请上来
ctx.drawImage(new Image(), 0, 0);

为坤坤涂上靓丽色彩

坤坤的底子有了，但还差点灵魂——颜色。别着急，Canvas 也能轻松帮你搞定。

// 设置颜色，今天给坤坤穿个红马甲
ctx.fillStyle = '#ff0000';
// 给坤坤来个全身涂装
ctx.fill();

让颜色跟着你的手指跳跃

现在，重点来了！我们要让坤坤的衣服随着你的手指跳跃变色。这就像给坤坤施了个魔法，点哪变哪色。

// 给画布加上监听器，时刻关注你的手指
canvas.addEventListener('click', function(e) {
  // 获取你点击的位置
  var x = e.clientX;
  var y = e.clientY;
  // 用放大镜看看你点击的地方是什么颜色
  var color = ctx.getImageData(x, y, 1, 1).data;
  // 把这个颜色给坤坤穿上
  ctx.fillStyle = 'rgb(' + color[0] + ',' + color[1] + ',' + color[2] + ')';
  // 给坤坤换上新装
  ctx.fill();
});