帆布绘制陆地

效果图

帆布绘制陆地

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>

帆布绘制陆地

帆布绘制陆地