HTML5中canvas的学习以及运用canvas绘制渐变圆

最新推荐文章于 2025-05-21 22:29:00 发布

原创最新推荐文章于 2025-05-21 22:29:00 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #jquery #javascript

这篇博客详细介绍了如何使用HTML5的canvas元素进行图形绘制，特别是焦点在于创建和应用各种类型的渐变来绘制填充圆形、渐变边框圆以及放射性渐变圆。通过定义画布、设置样式和使用CanvasRenderingContext2D的API，如createLinearGradient(), createRadialGradient()等，实现了丰富的图形效果。" 88627179,7672261,谓词公式的构成与量词辖域解析,"['逻辑', '形式逻辑', '数学逻辑', '符号逻辑']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、canvas绘制步骤的学习

1.定义画布

首先，定义了一个id为app，高300，宽400并且背景色为白色的画布

2.在script脚本中进行绘制

//1. 获取canvas元素

var app = document.querySelector("#app")

//2. 获取CanvasRenderingContext2D实例对象，用该实例对象提供的方法进行图形绘制

var context = app.getContext("2d");

//3. 绘制

context.fillStyle = "pink"

context.fillRect(0,0,100,100);

</script>

其中要运用的是CanvasRenderingContext2D.prototype原型中的方法

方法包括：

样式设置及绘制：fillStyle、strokeStyle、fill()、stroke()
渐变样式： createLinearGradient()、 createRadialGradient()
绘制矩形：fillRect()、strokeRect()
绘制路径：beginPath()、arc()、moveTo()、lineto()、 bezierCurveTo ()、closePath()
坐标变换：translate()、scale()、rotate()
绘制图像：drawImage()
绘制文本：fillText()

二、绘制渐变填充圆形、渐变边框圆、放射性渐变圆

运用到的方法：

createLinearGradient()—线性渲染

context.createLinearGradient(x0,y0,x1,y1);

x0：渐变开始的x坐标

y0：渐变开始的y坐标

x1：渐变结束的x坐标

y1：渐变结束的y坐标

createRadialGradient()—放射性颜色渐变

createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)

xStart, yStart：开始圆的圆心的坐标

radiusStart：开始圆的半径

xEnd, yEnd：结束圆的圆心的坐标

radiusEnd：结束圆的半径

beginPath（）开始路径

closePath（）结束路径

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>画布-圆形绘制</title>
  <style>
    canvas {
      border: 1px solid #666;
    }
  </style>
</head>

<body>
  <canvas id="app" width="800" height="800"></canvas>
  <script>
    // 1.获取canvas画布
    var app = document.querySelector('canvas')
    // 2.获取上下文对象（画笔）
    var context = app.getContext('2d');
    // 3.绘制

    //3.2执行绘制
    context.beginPath();//beginPath()开始路径
    context.arc(200, 100, 50, 0, Math.PI * 2)
 
    //4.填充圆形样式
    //渐变效果  
    // createRadialGradient  表示放射性颜色渐变   createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)
    var grad = context.createRadialGradient(200,100,10,200,100,15);
    grad.addColorStop(0,'pink');
    grad.addColorStop(0.5,'blueviolet');
    grad.addColorStop(1,'purple');
    // fillStyle表示填充样式
    context.fillStyle = grad;
    // context.closePath();
    context.fill();
    context.closePath();//closePath()结束路径   证明上一个圆绘制结束

    // 边框圆形
    context.beginPath();
    context.arc(200, 300, 50, 0, Math.PI * 2);

    // 边框渐变渲染
    // 边框的渲染只能够进行线性渲染
    var grad = context.createLinearGradient(200,100,0,100);
    grad.addColorStop(0,'pink');
    grad.addColorStop(0.5,'blueviolet');
    grad.addColorStop(1,'purple');
    context.strokeStyle = grad;
    context.stroke();
    context.closePath();

    // 填充圆形    线性渐变
    context.beginPath();
    context.arc(200, 500, 50, 0, Math.PI * 2)

    //4.填充圆形样式
    //渐变效果  
    // createLinearGradient线性渲染   
    var grad = context.createLinearGradient(200,100,0,100);
    grad.addColorStop(0,'pink');
    grad.addColorStop(0.5,'blueviolet');
    grad.addColorStop(1,'purple');
    // fillStyle表示填充样式
    context.fillStyle = grad;
    context.fill();

  </script>
</body>

</html>

结果图：