15-canvas渐变色
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渐变色的更多相关文章
- HTML5自学笔记[ 15 ]canvas绘图实例之钟表
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- HTML5自学笔记[ 15 ]canvas绘图基础6
关于线条的一些属性: lineCap,这个属性表示的是线条两端的样式,值有butt(默认)/round/square. lineJoin,这个属性表示线条相交的方式,值有miter(默认)/bevel ...
- [译]Canvas的基本用法
在本文章中 <canvas> 元素 替换内容 </canvas> 标签不可省 渲染上下文(The rendering context如何翻译) 检查支持性 一个模板骨架 一个简 ...
- 炫丽的倒计时效果Canvas绘图与动画基础
前言 想要在自己做的网页中,加入canvas动画效果,但是发现模板各种调整不好,觉得还是要对canvas有所了解,才可以让自己的网页变得狂拽炫酷吊炸天! 一.绘制基础 1 <!DOCTYPE h ...
- 基于canvas的电子始终
//code <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...
- canvas画的时钟
结合几天来学习的canvas的API,终于完成了一个时钟呵呵 html <!doctype html> <html> <head> <meta charset ...
- 绘图之Canvas学习
一 Canvas的用法 博客:http://blog.taorenjia.com/?p=237 1.drawCircle(float cx, float cy, float radius, ...
- canvas 基础
1.<canvas>元素 <canvas id="tutorial" width="150" height="150"&g ...
- Canvas HTML5
不支持的时候记得: <canvas id="stockGraph" width="150" height="150"> curr ...
- 在canvas上面拖拽对象。
原文:https://html5.litten.com/how-to-drag-and-drop-on-an-html5-canvas/ 下面作者的原始的版本会抖动一下(鼠标刚点下去的时候,位置会发生 ...
随机推荐
- 随机二次元图片API第二弹
Tips:当你看到这个提示的时候,说明当前的文章是由原emlog博客系统搬迁至此的,文章发布时间已过于久远,编排和内容不一定完整,还请谅解` 随机二次元图片API第二弹 日期:2018-3-4 阿珏 ...
- doris wget 地址
wget https://apache-doris-releases.oss-accelerate.aliyuncs.com/apache-doris-2.0.0-alpha1-bin-x86_64. ...
- 深入了解 C# Span：高性能内存操作的利器
深入了解 C# Span:高性能内存操作的利器 在 C# 7.2 中引入的 Span<T> 类型为我们提供了一种高效且安全地对内存进行操作的方式.Span<T> 是一个轻量级的 ...
- AWX+gitlab
目录 AWX+gitlab 1. Awx配置 1.1 添加机构 1.2 添加团队 1.3 添加主机 1.4 测试主机连通性 2. 对接gitlab 2.1 添加凭证 2.2 添加项目 2.3 上传pl ...
- CLR via C# 笔记 -- 线程基础(26)
1. Microsoft 设计这个OS内核时,决定在一个进程中运行应用程序的每个实例.进程实际是应用程序的实例要使用的资源的集合.每个进程都被赋予了一个虚拟地址空间,确保在一个进程中使用的代码和数据无 ...
- QT自定义右键菜单
利用QMenu和QAction可以实现非常实用的右键菜单功能.具体实现思路如下: 1.在xxx.h文件中添加如下头文件 #include <QMenu> #include <QCon ...
- VS2017 error CS0234: 命名空间“Microsoft”中不存在类型或命名空间名“Office”问题的一种解决方案
最近需要使用VS2017编辑C#,但在编译时软件报错:error CS0234: 命名空间"Microsoft"中不存在类型或命名空间名"Office" 在网上 ...
- MinIO使用记录
探索MinIO:高性能.分布式对象存储解决方案 注:本文除代码外多数为AI生成 最近因为有项目需要换成Amazon S3的云存储,所以把之前做过的minio部分做一个记录,后面也会把基于这版改造的S3 ...
- VulnHub_DC-6渗透流程
DC-6 kali:192.168.157.131 靶机:192.168.157.150 修改host文件,添加192.168.157.150 wordy不然解析不了域名 信息收集 发现是WordPr ...
- CF372C
思路 根据题意可以得到dp转移方程是 \(f_{i,j}=\max\{f_{i-1,k}+b_i-|a_i-j|\}\) 而且 \(j-(t_{i}-t_{i-1})\times d\le k\le ...