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. Unity下简易字符串指令调试

    Unity下简易字符串指令调试 输入相应的字符串命令即可调用特定的方法,比如让角色等级提升,生成特定数量的Boss等 using System; using UnityEngine; using Sy ...

  2. 数据分析---matplotlib模块的使用

    1.摘要 在数据可视化.统计绘图和图表生成领域,Python 被广泛使用,其中 Matplotlib 是一个极其重要的基础三方库.本博客旨在介绍 Python 及其三方库 Matplotlib 的详细 ...

  3. Java面试知识点（五）hashmap、hashtable和hashset

    1. 关于 HashMap 的一些说法: a) HashMap 实际上是一个 "链表散列" 的数据结构,即数组和链表的结合体.HashMap 的底层结构是一个数组,数组中的每一项是 ...

  4. 关于tomcat中servlet的url-pattern匹配规则

    首先需要明确几点容易混淆的规则: servlet容器中的匹配规则既不是简单的通配,也不是正则表达式,而是特定的规则.所以不要用通配符或者正则表达式的匹配规则来看待servlet的url-pattern ...

  5. 基于 Termux 和 ipv6 把手机打造成公网服务器

    Termux 安装与配置 安装 从这下载: https://f-droid.org/en/packages/com.termux/ 初始化 授权读写手机储存 termux-setup-storage ...

  6. npm install及其目录结构

    npm install 安装包及其依赖.npm install: 默认情况下,安装package.json文件中列出的所有依赖.加-P或--production后,只安装dependencies列出的 ...

  7. Me-and-My-Girlfriend-1靶机渗透流程

    Me-and-My-Girlfriend-1 靶机下载 Description: This VM tells us that there are a couple of lovers namely A ...

  8. 基于EF Core存储的国际化服务

    前言 .NET 官方有一个用来管理国际化资源的扩展包Microsoft.Extensions.Localization,ASP.NET Core也用这个来实现国际化功能.但是这个包的翻译数据是使用re ...

  9. IntersectionObserver 实现图片懒加载

    背景 最近使用express做导航类型网站,因为这个是后端jade渲染,浏览器拿到页面之后,解析出来dom结构,导致100+的图片瞬间加载,严重浪费了宽带资源,加重服务器负担,因此打算延迟加载图片 模 ...

  10. vscode element-plus/lib/theme-chalk/index.css报错路径找不到

    vscode  element-plus/lib/theme-chalk/index.css报错路径找不到 import { createApp } from 'vue' import './styl ...