球球英雄手游官网

書名： HTML5 Canvas Cookbook
作者名： Eric Rowell
本章字數(shù)： 341字
更新時間： 2021-08-27 12:08:06

Fun with Bezier curves: drawing a cloud

In this recipe, we will learn how to draw a custom shape by connecting a series of Bezier curve sub paths to create a fluffy cloud.

How to do it...

Follow these steps to draw a fluffy cloud in the center of the canvas:

Define a 2D canvas context:

window.onload = function(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

Draw a cloud by connecting six Bezier curves:

    var startX = 200;
    var startY = 100;
    
  // draw cloud shape
    context.beginPath(); 
    context.moveTo(startX, startY);
    context.bezierCurveTo(startX - 40, startY + 20, startX - 40, startY + 70, startX + 60, startY + 70);
    context.bezierCurveTo(startX + 80, startY + 100, startX + 150, startY + 100, startX + 170, startY + 70);
    context.bezierCurveTo(startX + 250, startY + 70, startX + 250, startY + 40, startX + 220, startY + 20);
    context.bezierCurveTo(startX + 260, startY - 40, startX + 200, startY - 50, startX + 170, startY - 30);
    context.bezierCurveTo(startX + 150, startY - 75, startX + 80, startY - 60, startX + 80, startY - 30);
    context.bezierCurveTo(startX + 30, startY - 75, startX - 20, startY - 60, startX, startY);
    context.closePath();

Define a radial gradient with the createRadialGradient() method and fill the shape with the gradient:

  //add a radial gradient
    var grdCenterX = 260;
    var grdCenterY = 80;
    var grd = context.createRadialGradient(grdCenterX, grdCenterY, 10, grdCenterX, grdCenterY, 200);
    grd.addColorStop(0, "#8ED6FF"); // light blue
    grd.addColorStop(1, "#004CB3"); // dark blue
    context.fillStyle = grd;
    context.fill();

Set the line width and stroke the cloud:

  // set the line width and stroke color
    context.lineWidth = 5;
    context.strokeStyle = "#0000ff";
    context.stroke();
};

Embed the canvas tag inside the body of the HTML document:

<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;"> 
</canvas>

How it works...

To draw a fluffy cloud using the HTML5 canvas API, we can connect several Bezier curves to form the perimeter of the cloud shape. To create the illusion of a bulbous surface, we can create a radial gradient using the createRadialGradient() method, set the gradient colors and offsets using the addColorStop() method, set the radial gradient as the fill style using fillStyle, and then apply the gradient using fill().

官术网_书友最值得收藏!

HTML5 Canvas Cookbook

Fun with Bezier curves: drawing a cloud

How to do it...

How it works...