当前位置：网站首页>Chapter 9 of canvas: gradients and shadows
Chapter 9 of canvas: gradients and shadows
2022-06-29 14:38:00 【yxqq378287007】
《canvas》 The first 9 Chapter Gradients and shadows
The first 9 Chapter Gradients and shadows
9.1 Linear gradient
Gradient along a straight line .
var gnt = cxt.createLinearGradient(x1, y1, x2, y2);
gnt.addColorStop(value1, color1);
gnt.addColorStop(value2, color2);
cxt.fillStyle = gnt;
cxt.fill(); //fillRect() or fillText()
- Graphic gradients
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<meta charset="utf-8" />
<script type="text/javascript"> function $$(id) {
return document.getElementById(id); } window.onload = function () {
var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); var gnt = cxt.createLinearGradient(0, 150, 200, 150); gnt.addColorStop(0, "HotPink"); gnt.addColorStop(1, "white"); cxt.fillStyle = gnt; cxt.fillRect(0, 0, 200, 150); } </script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
- Text gradient
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript"> function $$(id) {
return document.getElementById(id); } window.onload = function () {
var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); var text = " Green leaf learning network "; cxt.font = "bold 50px Microsoft YaHei "; var gnt = cxt.createLinearGradient(0, 75, 200, 75); gnt.addColorStop(0, "HotPink"); gnt.addColorStop(1, "LightSkyBlue"); cxt.fillStyle = gnt; cxt.fillText(text, 10, 90); } </script>
</head>
<body>
<canvas id="canvas" width="270" height="150" style="border:1px dashed gray"></canvas>
</body>
</html>
9.2 Radial Gradient
Round or oval gradients , Color gradients from one starting point to all directions .
var gnt = cxt.createRadialGradient(x1, y1, r1, x2, y2, r2);
gnt.addColorStop(value1, color1);
gnt.addColorStop(value2, color2);
cxt.fillStyle = gnt;
cxt.fill(); //fillRect() or fillText()
- Egg yolk gradient
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript"> function $$(id) {
return document.getElementById(id); } window.onload = function () {
var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); // A circle cxt.beginPath(); cxt.arc(80, 80, 50, 0, Math.PI * 2, true); cxt.closePath(); // The gradient var gnt = cxt.createRadialGradient(100, 60, 10, 80, 80, 50); gnt.addColorStop(0, "white"); gnt.addColorStop(0.9, "orange"); gnt.addColorStop(1, "rgba(0,0,0,0)"); // fill cxt.fillStyle = gnt; cxt.fill(); } </script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray"></canvas>
</body>
</html>
- Multi color radial gradient
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript"> function $$(id) {
return document.getElementById(id); } window.onload = function () {
var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); gradient = cxt.createRadialGradient(60, 60, 0, 60, 60, 60); gradient.addColorStop("0", "magenta"); gradient.addColorStop("0.25", "blue"); gradient.addColorStop("0.50", "green"); gradient.addColorStop("0.75", "yellow"); gradient.addColorStop("1.0", "HotPink"); cxt.fillStyle = gradient; cxt.fillRect(0, 0, 120, 120); } </script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
- Multi color radial gradient （ Dynamic graph ）
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript"> function $$(id) {
return document.getElementById(id); } window.onload = function () {
var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); var i = 0; setInterval(function () {
gradient = cxt.createRadialGradient(60, 60, 0, 60, 60, 60); gradient.addColorStop(i * 0, "magenta"); gradient.addColorStop(i * 0.25, "blue"); gradient.addColorStop(i * 0.50, "green"); gradient.addColorStop(i * 0.75, "yellow"); gradient.addColorStop(i * 1.0, "HotPink"); cxt.fillStyle = gradient; i = i + 0.1; if (i >= 1) {
// After exceeding the color point value , Automatic return 0 i = 0; } cxt.fillRect(0, 0, 120, 120); }, 50); } </script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
9.3 shadow
- Shadow attribute
| attribute | explain |
|---|---|
| shadowOffsetX | Horizontal offset between shadow and figure , Default 0 |
| shadowOffsetY | The vertical offset between shadow and figure , Default 0 |
| shadowColor | Shadow color , Default black |
| shadowBlur | Shadow blur value , Default 0. The bigger it is , The greater the ambiguity . |
- Graphic shadows
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript"> function $$(id) {
return document.getElementById(id); } // Define functions for drawing graphics window.onload = function () {
var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); // Set the shadow in the upper left direction cxt.shadowOffsetX = -5; cxt.shadowOffsetY = -5; cxt.shadowColor = "LightSkyBlue"; cxt.shadowBlur = 1; cxt.fillStyle = "HotPink"; cxt.fillRect(30, 30, 50, 50); // Set the shadow in the lower right direction cxt.shadowOffsetX = 5; cxt.shadowOffsetY = 5; cxt.shadowColor = "LightSkyBlue"; cxt.shadowBlur = 10; cxt.fillStyle = "HotPink"; cxt.fillRect(100, 30, 50, 50); } </script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
- Text shadow
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript"> function $$(id) {
return document.getElementById(id); } window.onload = function () {
var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); // Define text var text = " Green leaf learning network "; cxt.font = "bold 60px Microsoft YaHei "; // Define shadows cxt.shadowOffsetX = 5; cxt.shadowOffsetY = 5; cxt.shadowColor = "LightSkyBlue"; cxt.shadowBlur = 10; // Fill in the text cxt.fillStyle = "HotPink"; cxt.fillText(text, 10, 90); } </script>
</head>
<body>
<canvas id="canvas" width="320" height="150" style="border:1px dashed gray"></canvas>
</body>
</html>
- Image shadow
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript"> function $$(id) {
return document.getElementById(id); } window.onload = function () {
var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); // establish image object var image = new Image(); image.src = "images/princess.png"; image.onload = function () {
// Define shadows cxt.shadowOffsetX = 5; cxt.shadowOffsetY = 5; cxt.shadowColor = "HotPink"; cxt.shadowBlur = 10; //cxt.fillRect(40, 15, 120, 120); cxt.drawImage(image, 40, 15); } } </script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
- 4 Shadow effect in two directions
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript"> function $$(id) {
return document.getElementById(id); } window.onload = function () {
var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); // establish image object var image = new Image(); image.src = "images/princess.png"; image.onload = function () {
// Define shadows //cxt.shadowOffsetX = 0; //cxt.shadowOffsetY = 0; cxt.shadowColor = "HotPink"; cxt.shadowBlur = 10; //cxt.fillRect(40, 15, 120, 120); cxt.drawImage(image, 40, 15); } } </script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
边栏推荐
- Laravel - composer installs the specified laravel version
- systemd调试
- QRCode自定义二维码中间图片
- Stable currency risk profile: are usdt and usdc safe?
- 【Try to Hack】vulnhub DC2
- 每周 Postgres 世界动态 2022w25
- Redis为什么这么快？Redis是单线程还是多线程？
- redis在window和Linux环境下的安装
- Redis的缓存雪崩、缓存击穿、缓存穿透与缓存预热、缓存降级
- 喜迎市科协“十大”•致敬科技工作者 | 卢毅：守护电网传输安全的探索者
猜你喜欢
【置顶】博客使用须知，公告板，留言板，关于博主
Redis fragment cluster setup and use tutorial
Class template case - array class encapsulation
Turbulent intermediary business, restless renters
Recruiting talents and seeking development | Jincang of the National People's Congress won the "best employer school recruitment case Award"
你还在用命令看日志？快用 Kibana 吧，一张图胜过千万行日志
微信小程序：修复采集接口版云开发表情包
Crazy digital collections, the next myth of making wealth?
idea输出台输出中文乱码问题
节点数据采集和标签信息的远程洪泛传输
随机推荐
Shell——文本处理命令
Class template case - array class encapsulation
redis在window和Linux环境下的安装
东莞虎门券商公司股票开户哪个更好更安全？
Redis' data expiration clearing strategy and memory obsolescence strategy
Redis为什么这么快？Redis是单线程还是多线程？
广州开展瓶装气安全宣传活动，普及燃气安全知识
【关联分析实战篇】为什么 BI 软件都搞不定关联分析
goby如何导出扫描结果
Thanos Store 组件
《canvas》之第9章 渐变与阴影
微信小程序：大红喜庆版UI猜灯谜又叫猜字谜
Redis' cache avalanche, cache breakdown, cache penetration, cache preheating, and cache degradation
《canvas》之第13章 事件操作
传输层 用户数据报协议（UDP）
Redis哨兵机制原理详解
内网穿透(nc)
"Dead" Nokia makes 150billion a year
Stable currency risk profile: are usdt and usdc safe?
Swagger2的配置教程