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. FinalReference 如何使 GC 过程变得拖拖拉拉

    本文基于 OpenJDK17 进行讨论,垃圾回收器为 ZGC. 提示: 为了方便大家索引,特将在上篇文章 <以 ZGC 为例,谈一谈 JVM 是如何实现 Reference 语义的> 中讨 ...

  2. Linux系统与网络管理

    0. 背景 0.1 Unix Unix诞生于1969年 特点 多任务 多用户 多平台 保护模式 可移植操作系统接口(POSIX) 0.2 Linux 与Unix关系 类Unix系统,完全按照Unix的 ...

  3. 在Winform程序中动态绘制系统名称，代替图片硬编码名称

    在以前我做程序的时候,一般在登录窗口里面显示程序名称,登录窗口一般设置一张背景图片,由于程序的名称一般都是确定的,所以也不存在太大的问题,不过如果客户定制不同的系统的时候,需要使用Photoshop修 ...

  4. C#如何创建一个可快速重复使用的项目模板

    写在前面 其实很多公司或者资深的开发都有自己快速创建项目的脚手架的,有的是魔改代码生成器实现,有的直接基于T4,RazorEngine等模板引擎打造:但无论如何,其最终目的其实就是搭建一个自定义项目模 ...

  5. java并发和排序的简单例子(Runnable+TreeSet)

    很多时候并发需要考虑线程安全,但也有很多时候和线程安全毛关系都没有,因为并发最大的作用是并行,线程安全仅仅是并发的一个子话题. 例如常常会用于并发运算,并发i/o. 下文是一个练习笔记. 运行环境:w ...

  6. ETL服务器连接GaussDB(DWS)集群客户端配置

    问题描述:给ETL的服务器上安装gsql的工具,用来连接GaussDB(DWS)集群,做数据抽取用 DWS:GaussDB(DWS) 8.2.1-ESL 1.获取软件包 登录FusionInsight ...

  7. FPGA案例开发手册——基于全志T3＋Logos FPGA核心板

    前 言 本文档主要提供评估板FPGA端案例测试方法,适用的开发环境为Windows 7 64bit和Windows 10 64bit. 本文案例基于创龙科技的全志T3+Logos FPGA核心板,它是 ...

  8. 使用kafka作为生产者生产数据到hdfs(单节点）

    关键:查看kafka官网的userguide agent.sources = kafkaSourceagent.channels = memoryChannelagent.sinks = hdfsSi ...

  9. Lambda表达式常见用法

    Lambda介绍 Lambda,别名函数式编程 函数式编程是一种编程范式.它把计算当成是数学函数的求值,从而避免改变状态和使用可变数据.它是一种声明式的编程范式,通过表达式和声明而不是语句来编程. L ...

  10. Java 面向对象编程之接口

    什么是接口? 是抽象方法的集合,接口通常以interface来声明,一个类通过继承接口的方式,从而来继承接口的抽象方法 语法 interface 名称 [extends 其他的接⼝名] { // 声明 ...