html5_canvas_3_drawroad canvas-优快云博客

本文链接：https://blog.youkuaiyun.com/phoenix_qiqi/article/details/6977338

<!DOCTYPE HTML>
<HTML>
 <HEAD>
  
  <TITLE> New Document </TITLE>
  <script>
      function createCanopyPath(context) {

		  context.beginPath();
		  context.moveTo(-25,-50);
		  context.lineTo(-10,-80);
		  context.lineTo(-20,-80);
		  context.lineTo(-5,-110);
		  context.lineTo(-15,-110);

		  context.lineTo(0,-140);

		  context.lineTo(15,-110);
		  context.lineTo(5,-110);
		  context.lineTo(20,-80);
		  context.lineTo(10,-80);
		  context.lineTo(25,-50);

		  context.closePath();
	  }

	  function drawRoad(context) {
			context.save();
			context.translate(-10,350);
			context.beginPath();

			//第一条曲线想右上方弯曲
			context.moveTo(0, 0);
			context.quadraticCurveTo(170, -50, 260, -190);

			//第二条曲线想右下方弯曲
			//x,y ---起点坐标，x,y----终点坐标
			context.quadraticCurveTo(310, -250, 410, -250);

			context.strokeStyle='#663300';
			context.lineWidth=20;
            context.stroke();
			context.restore();
	  }


      function drawDiagonal() {

			//获得canvas对象
            var canvas = document.getElementById('diagonal');

			//指定绘制的类型为2d，并返回其绘画环境
            var context = canvas.getContext('2d');
			
			//保存变换前的context状态
            context.save();

			context.translate(130,250);

			createCanopyPath(context);
			//加宽线条
			context.lineWidth = 4;

			//平滑路径链接点
			context.lineJoin='round';

			context.strokeStyle='#663300';

			context.fillStyle='#339900';

			context.fill();

			context.fillStyle='#663300';
			context.fillRect(-5, -50, 10, 50);

			//画图， 参数:图片 位置 宽度 高度
			context.drawImage(bark, -5, -50, 10 ,50);

			//渐变
			//水平渐变对象 x,y--渐变起始点 x,y--渐变终点
			var trunkGradient = context.createLinearGradient(-5, -50, 5, -50);

			//偏移量 颜色
			trunkGradient.addColorStop(0, "#663300");
			trunkGradient.addColorStop(0.4, "#996600");
			trunkGradient.addColorStop(1, "#552200");

			//填充样式
			context.fillStyle=trunkGradient;

			//填充
			context.fillRect(-5, -50, 10, 50);


			var canopyShadow = context.createLinearGradient(0, -50, 0, 0);
			//设置透明度
			trunkGradient.addColorStop(0, 'rgba(0,0,0,0.5)');
			trunkGradient.addColorStop(0.2, 'rgba(0,0,0,0.0)');
			context.fillStyle=canopyShadow;
			context.fillRect(-5, -50, 10, 50);

            context.scale(2,2);

			//把所有的线绘制到canvas上
            context.stroke();
			context.restore();

			drawRoad(context);


	  }

	  // load image
	  var bark = new Image();
	  bark.src = "bark.jpg";
	  bark.onload = function() {
	      drawDiagonal();
	  }

  </script>
 </HEAD>

 <BODY>
	<canvas id="diagonal" height="600" width="800" style="border:1px solid red"></canvas>
 </BODY>
</HTML>