是否得到了效果，能简化吗

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

是否得到了效果，能简化吗

来源：7-7 编程练习

慕侠309804

2019-02-24 23:05:53

<!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>

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

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

// 在此处补充代码

context.shadowBlur = "10";

context.save();

context.shadowOffsetX = 7;

context.shadowOffsetY = 10;

context.shadowColor = "rgba(255,255,255,0.5)"

context.arc(161,161,50,0,Math.PI*2,true);

context.fillStyle = "rgba(255,255,0,1)";

context.fill();

context.restore();

context.beginPath();

context.save();

context.shadowOffsetX = 15;

context.shadowOffsetY = 25;

context.shadowColor = "rgba(255,255,255,.5)"

context.font ="100px 华文行楷";

context.fillStyle = "rgba(255,255,255,1)";

context.fillText("山高月小",600,300);

context.restore();

context.beginPath();

context.shadowOffsetX = 20;

context.shadowColor = "rgba(0,0,255,.3)";

context.moveTo(0,1000);

context.quadraticCurveTo(180,184,294,1000);

context.strokeStyle = "rgba(0,0,255,.4)";

context.lineWidth = 20;

context.stroke();

context.beginPath();

context.moveTo(252,1000);

context.quadraticCurveTo(304,362,520,1000);

context.stroke();

context.beginPath();

context.moveTo(529,1000);

context.quadraticCurveTo(544,83,794,1000);

context.stroke();

context.beginPath();

context.moveTo(717,1000);

context.quadraticCurveTo(954,184,1200,1000);

context.stroke();

</script>

</body>

</html>

写回答

1回答

好帮手慕星星

好帮手慕星星

2019-02-25

你好，经测试实现效果是不错的。

canvas绘图就是需要一步一步的来操作，没有简单的方法哦。

祝学习愉快！

0

0 学习 · 4826 问题

相似问题

用生成名片按钮后，曲线的长度总是达不到口号的长度效果

回答 2

老师，帮我看看有优化的地方吗

回答 1

9-2 离屏canvas的效果是这样吗？

回答 1

是这样写么，感觉写得很繁琐吶。。

回答 1

回答 1

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