效果图
html结构
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf-8"在
& lt;元http-equiv=癤-UA-Compatible"内容=癐E=edge"在
& lt; title> canvas24
& lt;链接rel=皊tylesheet"https://www.yisu.com/zixun/href=" ">
& lt;/head>
& lt; body>
& lt;帆布id=癱anvas"风格=氨呔?1 px固体# aaa;还:块;保证金:50 px汽车;“在
当前浏览器不支持画布,请更换浏览器后再试
& lt;/canvas>
& lt;/body>
& lt;/html>
js脚本
& lt; script>
窗口。onload=function () {
画布var=. getelementbyid (“canvas");
画布。宽度,=800;
画布。身高=800;
背景=canvas.getContext (“2 d");
drawLand(上下文);
}
函数drawLand(上下文){
context.save ();
context.beginPath ();
context.moveTo (0600),
context.bezierCurveTo (540400660800、1200、600);
context.lineTo (1200、800);
context.lineTo (0800),
context.closePath ();
var landStyle=context.createLinearGradient (0800, 0, 0),
landStyle.addColorStop (0.0 & # 39; # 030 & # 39;);
landStyle.addColorStop (1.0 & # 39; # 580 & # 39;);
上下文。fillStyle=landStyle;
context.fill ();
context.restore ();}
& lt;/script>