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/ 下面作者的原始的版本会抖动一下(鼠标刚点下去的时候,位置会发生 ...
随机推荐
- Docker安装InfluxDB1.x和InfluxDB2.x以及与SpringBoot整合
两者区别: 1.x 版本使用 influxQL 查询语言,2.x 和 1.8+(beta) 使用 flux 查询语法:相比V1 移除了database 和 RP,增加了bucket. V2具有以下几个 ...
- Nacos + Gateway网关搭建微服务
文章所有代码GtiHub:https://github.com/Tom-shushu/work-study 里面的gateway-server和server1项目 1.Docker 部署 Nacos ...
- 新品再袭，比RK3568J降本40%+，瑞芯微最新性价比工业平台-RK3562J
- Node.js 的ORM(Sequelize) 的使用
Sequelize是一个Node.js 的ORM.什么是ORM呢?对象关系映射(Object Relational Mapping).什么意思?就是在编程语言中,很容易创建对象,如果在面向对象的语言中 ...
- Notepad++ 搭建简单Java编译运行环境
简介 有时候使用Eclips进行Java相关方法的测试和验证太繁琐,经过查询实践,使用了Notepad++和JDK搭建了一个简单的编译运行环境. 搭建过程 在电脑上安装Java环境(网上教程很多,此过 ...
- yb课堂实战之轮播图接口引入本地缓存 《二十一》
轮播图接口引入缓存 CacheKeyManager.java package net.ybclass.online_ybclass.config; /** * 缓存key管理类 */ public c ...
- 算法金 | DL 骚操作扫盲，神经网络设计与选择、参数初始化与优化、学习率调整与正则化、Loss Function、Bad Gradient
大侠幸会,在下全网同名「算法金」 0 基础转 AI 上岸,多个算法赛 Top 「日更万日,让更多人享受智能乐趣」 今日 216/10000 抱个拳,送个礼 神经网络设计与选择 参数初始化与优化 学习率 ...
- Windows下git配合Unity要设置autocrlf=false
Unity的.asset文件的换行符一定是Unix (LF)格式的,哪怕在设置里选了用Windows (CRLF)也没用,这个选项只对创建的C# Script有效. 这些Unix换行文件提交上去没问题 ...
- [oeasy]python0019_ 打包和解包_struct_pack_unpack
打包和解包 回忆上次内容 ASCII 由这样几类字符构成 英文大写字符 英文小写字符 数字 符号 电报时代对于英文.数字的编码 使用的是摩斯电码 编辑 这摩斯电码是3进制的编码方式 长短空 怎 ...
- 一文全懂：Linux磁盘分区
一.物理设备的命名规则 在 Linux 系统中一切都是文件,硬件设备也不例外.所有的硬件设备文件都在/dev文件夹中. 硬件 在Linux内的文件名 SCSI/SATA/USB /dev/sd[a-p ...