老师那颜色老是设置不对这颜色是模糊重合的还是

首页课程实战体系课手记专栏慕课教程

老师那颜色老是设置不对这颜色是模糊重合的还是

来源：7-7 编程练习

qq_慕瓜7049344

2020-08-25 22:07:34

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>Document</title>

<style>

canvas {

background-color: #000;

opacity: 0.7

}

</style>

</head>

<body>

<canvas id="canvas" width="1200px" height="1000px">

您的浏览器不支持canvas

</canvas>

<script>

/**@type {HTMLCanvasElement}*/

var canvas = document.getElementById("canvas");

var xt = canvas.getContext("2d");

// 在此处补充代码

xt.save();

xt.shadowOffsetX = 5;

xt.shadowOffsetY = 5;

xt.shadowBlur = 15;

xt.shadowColor = 'rgba(255, 215, 0, 0.7)';

xt.arc(100, 100, 50, 0, 2 * Math.PI, true);

xt.fillStyle = '#EDED5B';

xt.fill();

xt.restore();

xt.save();

var str = '山高月小';

// xt.rotate(Math.PI/-45);

xt.shadowOffsetX=10;

xt.shadowOffsetY=10;

xt.shadowBlur=3;

xt.shadowColor = "rgba(190,190,190,0.5)";

xt.font = "50px STXingkai";

xt.fillStyle='white';

xt.fillText(str ,800,200);

xt.restore();

xt.save();

xt.beginPath();

xt.lineWidth=6;

xt.shadowOffsetX=3;

xt.shadowOffsetY=3;

xt.shadowBlur=15;

xt.shadowColor = "rgba(100, 149, 237, 0.5)"

xt.strokeStyle = "#1a3cd5";

xt.moveTo(0,1000);

xt.bezierCurveTo(120,300,150,700,270,1000)

// xt.quadraticCurveTo(5,-50,350,1000)

xt.stroke();

xt.beginPath();

xt.moveTo(230,1000);

xt.bezierCurveTo(300,450,400,700,500,1000);

xt.stroke();

xt.beginPath();

xt.moveTo(700,1000);

xt.bezierCurveTo(900,600,900,400,1200,1000);

xt.stroke();

xt.beginPath();

xt.moveTo(470,1000);

xt.bezierCurveTo(550,450,600,350,800,1000);

xt.stroke();

xt.restore();

</script>

</body>

</html>

写回答

1回答

好帮手慕码

好帮手慕码

2020-08-26

同学你好，效果正确。另，通过shadowOffsetX等实现模糊的效果就可以了~

祝学习愉快~

0

0 学习 · 6815 问题

相似问题

老师，这样可以吗？颜色不一样呢

回答 2

为什么图片在上，颜色在下，没有图片在下，颜色在上？

回答 2

这样对不对，还有颜色怎么设置呢？

回答 1

我复制好几人的代码，用chrome打开背景，都是黑色的，我的也是，我用16位的给了背景颜色就不会了

回答 1

为什么这个颜色不变了

回答 1

打开慕课网App查看更多内容