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. 06-Linux用户和组管理

    关于用户和组的知识 家目录 用户都有家目录:root用户家目录为/root.其他用户的家目录在/home/,如user1的家目录为/home/user1 当我们创建用户时,系统就会自动创建该用户的家目 ...

  2. 颠覆传统编程,用ChatGPT十倍提升生产力

    我们即将见证一个新的时代!这是最好的时代,也是最坏的时代! 需求背景 背景: 平时会编写博客,并且会把这个博客上传到github上,然后自己买一个域名挂到github上. 我平时编写的博客会有一些图片 ...

  3. 记录一次EF实体跟踪错误

    记录一次EF实体跟踪错误 前言 在我写文章编辑接口的,出现了一个实体跟踪的错误,详情如下 System.InvalidOperationException: The instance of entit ...

  4. Python_12 多继承与多态

    一.查缺补漏 1. self和super的区别:self调用自己方法,super调用父类方法 当使用 self 调用方法时,会从当前类的方法列表中开始找,如果没有,就从父类中再找 而当使用 super ...

  5. 【VMware vSAN】vSAN Data Protection Part 1：安装部署。

    VMware vSAN 8 U3 中新引入了基于 vSAN ESA 的全新 vSAN Data Protection 功能,借助 vSAN Data Protection 功能,您可以使用在 vSAN ...

  6. 用StabilityMatrix一键安装Stable Diffusion

    Stable Diffusion是2022年发布的深度学习文字到图像生成模型,它既能免费使用,又能部署在本地端,又有非常多的模型可以直接套用,在使用体验上比Midjourney和DALL-E更加强大. ...

  7. FFmpeg开发笔记（三十七）分析SRS对HLS协议里TS包的插帧操作

    ​<FFmpeg开发实战:从零基础到短视频上线>一书的"2.1.2  音视频文件的封装格式"介绍了视频流的PS格式和TS格式.由于TS包的长度固定,从TS流的任一片段开 ...

  8. Nginx 可视化配置神器NginxConfig

    Nginx 是前后端开发工程师必须掌握的神器.该神器有很多使用场景:比如反向代理.负载均衡.动静分离.跨域等等. 把 Nginx 下载下来打开 conf 文件夹的 nginx.conf 文件,Ngin ...

  9. Swift开发基础02-流程控制

    if-slse let age = 4 if age >= 22 { print("Get married") } else if age >= 18 { print( ...

  10. ArkTS基础知识

    [习题]ArkTS基础知识 及格分85/ 满分100   判断题 1. 循环渲染ForEach可以从数据源中迭代获取数据,并为每个数组项创建相应的组件. 正确(True)错误(False) 回答正确 ...