使用HTML5 Canvas创建一个图案-猿码集

使用HTML5 Canvas创建一个图案

HTML5 Canvas是用于绘制图形和动画的HTMl标签，它可以通过JavaScript在网页中的画布上实时绘制不同效果的图案。本文将介绍如何使用HTML5 Canvas创建一个简单的多彩图案。

步骤一：创建画布

首先，我们需要在HTML中创建一个位于页面中央的画布，代码如下：

<canvas id="myCanvas" width="500" height="500"></canvas>

上述代码中的“myCanvas”是画布的ID，宽和高分别为500像素，可以根据需要进行调整。

步骤二：获取Canvas上下文

接下来，我们需要在JavaScript中获取绘制Canvas图形所需的上下文。在Canvas中有两种类型的上下文：2D和3D。我们的图案将是2D的，因此我们需要获取2D上下文，代码如下：

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

上述代码中的“ctx”即为我们所需的2D上下文。

步骤三：绘制图案

接下来，我们使用canvas上下文的方法绘制图案。本教程将绘制一个由多个相交的圆形构成的图案。

首先，我们需要定义一个圆形对象，其中包含圆形的坐标、半径、颜色等属性，代码如下：

function Circle(x, y, r, color){
    this.x = x;
    this.y = y;
    this.r = r;
    this.color = color;
    
    this.draw = function(){
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r, 0, 2*Math.PI, false);
        ctx.fillStyle = this.color;
        ctx.fill();
    }
}

上述代码中，我们定义了一个Circle函数，用于创建圆形对象，并在其原型对象上定义了一个draw方法，用于在Canvas上下文中绘制圆形。

接下来，我们需要定义一个由多个相交的圆形构成的图案。我们可以计算出圆形相对于Canvas的坐标，并将每个圆形保存到一个数组中，代码如下：

var circles = [];
var radius = 100;
for(var i=0; i<10; i++){
    var x = Math.random() * (canvas.width - radius*2) + radius;
    var y = Math.random() * (canvas.height - radius*2) + radius;
    circles.push(new Circle(x, y, radius, "rgb(" + Math.random()*255 + "," + Math.random()*255 + "," + Math.random()*255 + ")"));
}

上述代码中，我们循环10次，随机生成圆形的坐标，并将每个圆形的颜色设置为随机颜色，在数组中保存。

步骤四：绘制圆形

最后，我们需要在Canvas上下文中绘制多个圆形。我们可以遍历圆形数组，并调用每个圆形的draw方法绘制圆形，代码如下：

function draw(){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for(var i=0; i<circles.length; i++){
        circles[i].draw();
    }
}
setInterval(draw, 100);

上述代码中，我们在draw函数中清除Canvas，并遍历圆形数组，逐个绘制圆形。我们使用setInterval方法使得我们的图案可以在Canvas中实时绘制。

效果展示

下面是使用HTML5 Canvas创建的多彩图案效果的展示：

使用HTML5 Canvas创建一个图案