HTML5中canvas实现矩形颜色渐变

最新推荐文章于 2024-08-14 00:51:11 发布

java_zhaoyanli

最新推荐文章于 2024-08-14 00:51:11 发布

阅读量3.7k

点赞数

分类专栏： myWork--

本文链接：https://blog.csdn.net/java_zhaoyanli/article/details/51648063

版权

这篇博客介绍如何使用HTML5的canvas API创建线性渐变，并应用于矩形填充，展示了从红色到绿色再到蓝色的颜色过渡效果。通过window.onload事件调用draw函数，在canvas画布上绘制了一个渐变矩形。

摘要由CSDN通过智能技术生成

<!--<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset = utf-8">
<title>HTML5</title>
<script type="text/javascript" charset = "utf-8">
//这个函数将在页面完全加载后调用
window.onload = function() {
  draw();
};
function draw(grad) {
  var canvas = document.getElementById('c1');
  if (!canvas||! canvas.getContext ) { return false; }
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  /* 指定渐变区域 */
  var grad  = ctx.createLinearGradient(0,0, 0,140);
  /* 指定几个颜色 */
  grad.addColorStop(0,'rgb(216, 9, 0)');    // 
  grad.addColorStop(0.5,'rgb(225, 255, 0)'); // 绿
  grad.addColorStop(1,'rgb(42, 231, 0)');  //hong
  /* 将这个渐变设置为fillStyle */
  ctx.fillStyle = grad;
  /* 绘制矩形 */
  ctx.rect(10,10,20,140);
  ctx.f