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. 慕课DJANGO配置

    重写内置的错误处理视图 在项目urls.py中添加配置 handler500 = "app01.views.page_500" handler404 = "app01.v ...

  2. Android 各层架构

    Android应用框架层和硬件抽象层以及底层之间的关系 1. JNI技术: (1).JNI技术简单的说就是在本地Java语言声明本地方法和加载动态链接库(.so文件) (2).动态链接库(.so文件) ...

  3. 全志科技T3国产工业核心板规格书（四核ARM Cortex-A7，主频1.2GHz）

    1 核心板简介 创龙科技SOM-TLT3是一款基于全志科技T3处理器设计的4核ARM Cortex-A7国产工业核心板,每核主频高达1.2GHz. 核心板通过邮票孔连接方式引出CSI.TVIN.MIP ...

  4. BTC交易流程

    交易流程 比特币的交易流程涉及多个步骤和参与方,包括发送方.接收方.矿工和比特币网络中的节点.以下是比特币交易的详细流程: 创建交易: 生成比特币地址:比特币地址是一个由公钥生成的字符串,用于接收比特 ...

  5. 1.Javascript 快速入门（主要）

    运算 &&运算是与运算,只有所有都为true,&&运算结果才是true: true && true; // 这个&&语句计算结果为tru ...

  6. Java 数据类型的包装数据类型

    什么是包装数据类型 Java是一个面向对象的编程语言,但基本类型并不具有对象的性质,为了让基本类型也具有对象的特征,就出现了包装类型. 集合框架里面需要存储对象,不能存储基本数据类型,所以需要存储包装 ...

  7. leetcode简单(数组、字符串)：[219, 268, 349, 414, 485, 541, 557, 821, 925, 977]

    目录 219. 存在重复元素 268. 丢失的数字 349. 两个数组的交集 414. 第三大的数 485. 最大连续 1 的个数 541. 反转字符串 II 557. 反转字符串中的单词 III 8 ...

  8. LLM并行训练6-激活优化

    前置知识 Activation 激活指的是一些在fp时计算得到的临时tensor, 会用于bp时的计算. 如果能在fp计算后把临时tensor缓存下来就可以加速bp, 缺点在于某些激活会占用大量显存. ...

  9. 解决： Cannot load information for github.com

    问题在共享项目至idea时候出现:I am getting this error while sharing on GithHub in Intellije IDEA : Cannot load in ...

  10. 【Oracle】Windows-19C 下载安装

    下载 Download 官网下载地址[需要Oracle账号]: https://www.oracle.com/database/technologies/oracle-database-softwar ...