1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>15-Canvas渐变色</title>

 6     <style>

 7         *{

 8             margin: 0;

 9             padding: 0;

10         }

11         canvas{

12             display: block;

13             margin: 0 auto;

14             background: red;

15         }

16     </style>

17 </head>

18 <body>

19 <canvas width="500" height="400"></canvas>

20 <script>

21     /*

22     1.渐变背景颜色

23     和普通的标签一样我们也可以给填充的图形设置线性渐变和径向渐变的背景颜色

24

25     2.设置图形渐变背景颜色步骤

26     2.1通过绘图工具创建渐变背景颜色

27     2.2指定渐变的范围

28     2.3将渐变背景颜色设置给对应的图形

29     * */

30     // 1.拿到canvas

31     let oCanvas = document.querySelector("canvas");

32     // 2.从canvas中拿到绘图工具

33     let oCtx = oCanvas.getContext("2d");

34

35     // 1.创建一个渐变的方案

36     /*

37     可以通过x0,y0 / x1,y1确定渐变的方向和渐变的范围

38     * */

39     let linearGradient = oCtx.createLinearGradient(100, 100, 300, 300);

40     /*

41     第一个参数是一个百分比 0~1

42     第二个参数是一个颜色

43     * */

44     linearGradient.addColorStop(0, "green");

45     linearGradient.addColorStop(0.5, "yellow");

46     linearGradient.addColorStop(1, "blue");

47

48     // oCtx.createRadialGradient();

49     // oCtx.fillStyle = "blue";

50     // fillStyle填充的颜色

51     oCtx.fillStyle = linearGradient;

52     oCtx.fillRect(100, 100, 200, 200);

53 </script>

54 </body>

55 </html>

15-canvas渐变色的更多相关文章

  1. HTML5自学笔记[ 15 ]canvas绘图实例之钟表

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. HTML5自学笔记[ 15 ]canvas绘图基础6

    关于线条的一些属性: lineCap,这个属性表示的是线条两端的样式,值有butt(默认)/round/square. lineJoin,这个属性表示线条相交的方式,值有miter(默认)/bevel ...

  3. [译]Canvas的基本用法

    在本文章中 <canvas> 元素 替换内容 </canvas> 标签不可省 渲染上下文(The rendering context如何翻译) 检查支持性 一个模板骨架 一个简 ...

  4. 炫丽的倒计时效果Canvas绘图与动画基础

    前言 想要在自己做的网页中,加入canvas动画效果,但是发现模板各种调整不好,觉得还是要对canvas有所了解,才可以让自己的网页变得狂拽炫酷吊炸天! 一.绘制基础 1 <!DOCTYPE h ...

  5. 基于canvas的电子始终

    //code <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...

  6. canvas画的时钟

    结合几天来学习的canvas的API,终于完成了一个时钟呵呵 html <!doctype html> <html> <head> <meta charset ...

  7. 绘图之Canvas学习

    一  Canvas的用法   博客:http://blog.taorenjia.com/?p=237    1.drawCircle(float cx, float cy, float radius, ...

  8. canvas 基础

    1.<canvas>元素 <canvas id="tutorial" width="150" height="150"&g ...

  9. Canvas HTML5

    不支持的时候记得: <canvas id="stockGraph" width="150" height="150"> curr ...

  10. 在canvas上面拖拽对象。

    原文:https://html5.litten.com/how-to-drag-and-drop-on-an-html5-canvas/ 下面作者的原始的版本会抖动一下(鼠标刚点下去的时候,位置会发生 ...

随机推荐

  1. 加速鸿蒙生态共建，蚂蚁mPaaS助力鸿蒙原生应用开发创新

    6月21日-23日,2024华为开发者大会(HDC 2024)如期举行.在22日的[鸿蒙生态伙伴SDK]分论坛中,正式发布了[鸿蒙生态伙伴SDK市场],其中蚂蚁数科旗下移动开发平台mPaaS(以下简称 ...

  2. python中globals()的用法

    python中globals()的用法 1. 获取所有的全局变量, 获取到的内容如下: {'__name__': '__main__', '__doc__': None, '__package__': ...

  3. 基于 SQLite 3 的 C 学习：2-高级操作

    基于 SQLite 3 的 C/C++ 学习:2-高级操作与有关函数 背景 基于 SQLite 3 的 C/C++ 学习:开发流程 与 基本函数 中,我们简单介绍了有关 SQLite3 函数的使用. ...

  4. 基于RK3588的8K视频解码显示案例分享！引领超高清工业视频时代

    8K.4K.2K显示对比 2K分辨率:也称为全高清(FULL HD),它具有1920 x 1080像素的分辨率.这是目前大多数消费者电视和电脑显示器的标准分辨率,可以提供良好的图像质量. 4K分辨率: ...

  5. logo描边

  6. 【Error】mysql的error.log中ranges: 268 max_threads: 4 split: 268 depth: 2是什么意思？

    2021-12-08T09:36:39.612332+08:00 44213799 [Note] [MY-011825] [InnoDB] Parallel scan: 4 2021-12-08T09 ...

  7. P3806 题解

    看到现有的一篇 DSU on tree 的题解复杂度假了,于是我来再写一篇. 首先重新梳理思路,维护每棵子树内深度为某个值的节点是否存在. 维护这个东西可以直接 DSU on tree 也就是把小的子 ...

  8. LabVIEW之项目文件结构透析

    代码的管理非常重要,LabVIEW本身自带很多代码管理工具.下面来剖析一个相对标准的小项目:

  9. tp5生命周期

    https://www.kancloud.cn/manual/thinkphp5/118011 1.入口文件 用户发起的请求都会经过应用的入口文件,通常是 public/index.php文件.当然, ...

  10. SQL Server 验证某栏位是否存在某字符串（CHARINDEX）

    SELECT * FROM LiuJun_PKqitchqi WHERE CHARINDEX('230527Z3258',qr_code) > 0