キャンバスを使って創作絵画や芸術表現を実現するためのテクニック

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

// 获取canvas对象和上下文对象
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

// 绘制一个矩形
context.fillStyle = "red";
context.fillRect(50, 50, 100, 100);

// 绘制一个圆形
context.strokeStyle = "blue";
context.arc(200, 200, 50, 0, Math.PI * 2, false);
context.stroke();

// 绘制一条直线
context.strokeStyle = "green";
context.beginPath();
context.moveTo(300, 300);
context.lineTo(400, 400);
context.stroke();

// 获取canvas对象和上下文对象
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

// 绘制天空
context.fillStyle = "skyblue";
context.fillRect(0, 0, canvas.width, canvas.height / 2);

// 绘制太阳
context.beginPath();
context.arc(100, 100, 50, 0, Math.PI * 2, false);
context.fillStyle = "yellow";
context.fill();

// 绘制草地
context.fillStyle = "green";
context.fillRect(0, canvas.height / 2, canvas.width, canvas.height / 2);

// 绘制树干
context.fillStyle = "brown";
context.fillRect(200, canvas.height / 2 - 150, 50, 150);

// 绘制树叶
context.beginPath();
context.moveTo(150, canvas.height / 2 - 150);
context.lineTo(225, canvas.height / 2 - 300);
context.lineTo(300, canvas.height / 2 - 150);
context.fillStyle = "green";
context.fill();