当前位置：网站首页>《canvas》之第9章 渐变与阴影

《canvas》之第9章 渐变与阴影

2022-06-29 13:55:00 【yxqq378287007】

《canvas》之第9章 渐变与阴影

第9章 渐变和阴影

9.1 线性渐变

沿一条直接进行的渐变。

var gnt = cxt.createLinearGradient(x1, y1, x2, y2);
gnt.addColorStop(value1, color1);
gnt.addColorStop(value2, color2);
cxt.fillStyle = gnt;
cxt.fill(); //fillRect()或fillText()
  • 图形渐变
<!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>
  • 文字渐变
<!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 = "绿叶学习网"; cxt.font = "bold 50px 微软雅黑"; 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 径向渐变

圆形或椭圆形渐变，颜色从一个起点向所有方向渐变。

var gnt = cxt.createRadialGradient(x1, y1, r1, x2, y2, r2);
gnt.addColorStop(value1, color1);
gnt.addColorStop(value2, color2);
cxt.fillStyle = gnt;
cxt.fill(); //fillRect()或fillText()
  • 蛋黄渐变
<!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"); //画圆 cxt.beginPath(); cxt.arc(80, 80, 50, 0, Math.PI * 2, true); cxt.closePath(); //渐变 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)"); //填充 cxt.fillStyle = gnt; cxt.fill(); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray"></canvas>
</body>
</html>
  • 多种颜色径向渐变
<!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>
  • 多种颜色径向渐变（动态图）
<!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) {
       //超过颜色点值后，自动归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 阴影

  • 阴影属性
属性说明
shadowOffsetX阴影与图形的水平偏移，默认0
shadowOffsetY阴影与图形的垂直偏移，默认0
shadowColor阴影颜色，默认黑色
shadowBlur阴影模糊值，默认0。越大，模糊度越强。
  • 图形阴影
<!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"); //设置左上方向的阴影 cxt.shadowOffsetX = -5; cxt.shadowOffsetY = -5; cxt.shadowColor = "LightSkyBlue"; cxt.shadowBlur = 1; cxt.fillStyle = "HotPink"; cxt.fillRect(30, 30, 50, 50); //设置右下方向的阴影 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>
  • 文字阴影
<!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 = "绿叶学习网"; cxt.font = "bold 60px 微软雅黑"; //定义阴影 cxt.shadowOffsetX = 5; cxt.shadowOffsetY = 5; cxt.shadowColor = "LightSkyBlue"; cxt.shadowBlur = 10; //填充文字 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>
  • 图片阴影
<!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"); //创建image对象 var image = new Image(); image.src = "images/princess.png"; image.onload = function () {
       //定义阴影 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个方向的阴影效果
<!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"); //创建image对象 var image = new Image(); image.src = "images/princess.png"; image.onload = function () {
       //定义阴影 //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>
原网站

版权声明
本文为[yxqq378287007]所创，转载请带上原文链接，感谢
https://blog.csdn.net/oqqyx1234567/article/details/125362900

边栏推荐

猜你喜欢

随机推荐