HTML5 Canvas几种画法

zwq

2016-12-28

关注关注

html5 Canvas画布画图几种常见方法

参考地址：

http://www.w3school.com.cn/html5/html_5_canvas.asp

http://www.cnblogs.com/Abner5/p/5845367.html

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style type="text/css">
    .title {
      color:#444;font-weight:bold;padding:5px;
    }
  </style>
</head>
<body>
  <div class="title">画布制图（线画图）：</div>
  <canvas id="myCanvas1" width="300px" height="300px" style="border:2px solid #bbb;">您的浏览器不支持canvas标签。</canvas>

  <div class="title">画布制图（画圆）arc(x, y, radius, startRad, endRad, anticlockwise)：</div>
  <canvas id="myCanvas2" width="300px" height="300px" style="border:2px solid #bbb;">您的浏览器不支持canvas标签。</canvas>

  <div class="title">画布制图（画圆）arcTo(x1, y1, x2, y2, radius)：</div>
  <canvas id="myCanvas3" width="300px" height="200px" style="border:2px solid #bbb;">您的浏览器不支持canvas标签。</canvas>

  <div class="title">画布制图（颜色过度）：</div>
  <canvas id="myCanvas4" width="300px" height="200px" style="border:2px solid #bbb;">您的浏览器不支持canvas标签。</canvas>

  <div class="title">画布制图（直接放图片）：</div>
  <canvas id="myCanvas5" width="300px" height="200px" style="border:2px solid #bbb;">您的浏览器不支持canvas标签。</canvas>

</body>
</html>

javascript：

/**
  * 画线画图
  */
var myCanvas1 = document.getElementById("myCanvas1");
if(myCanvas1.getContext) {
	var ctx1 = myCanvas1.getContext("2d");
	ctx1.fillStyle = '#D5B081'; // 线条填充颜色
	ctx1.moveTo(50, 150); // 重新设置起点
	ctx1.lineTo(80, 260);
	ctx1.lineTo(230, 260);
	ctx1.lineTo(250, 150);
	ctx1.lineTo(190, 180);
	ctx1.lineTo(120, 180);
	ctx1.lineTo(50, 150);
	ctx1.moveTo(155, 180); // 重新设置起点
	ctx1.lineTo(155, 50);
	ctx1.moveTo(155, 150); // 重新设置起点
	ctx1.lineTo(100, 120);
	ctx1.moveTo(155, 100); // 重新设置起点
	ctx1.lineTo(120, 70);
	ctx1.moveTo(155, 170); // 重新设置起点
	ctx1.lineTo(200, 80);
	ctx1.lineWidth = 10; // 画线宽度
	ctx1.lineCap = 'round'; // 线条的端点。lineCap有3个值：butt（平，默认）,round（圆）,square（方）
	ctx1.lineJoin = 'round'; // 线的交汇处，有3个属性：miter(默认，尖角)，bevel（斜角）,round（圆角）
	//ctx1.closePath(); //闭合路径，交汇处缺口处理
	ctx1.strokeStyle = '#844C10'; // 画线颜色
	ctx1.stroke(); // 画线
	ctx1.fill(); // 填充区域
}



/**
  * 画圆 arc(x, y, radius, startRad, endRad, anticlockwise)
  */
var myCanvas2 = document.getElementById("myCanvas2");
if(myCanvas2.getContext) {
	var ctx2 = myCanvas2.getContext("2d");
	ctx2.fillStyle = '#D5B081'; // 线条填充颜色
	ctx2.lineWidth = 10;
	//开始一个新的绘制路径
	ctx2.beginPath();
	//设置弧线的颜色为蓝色
	ctx2.strokeStyle = "#844C10";
	var circle = {
			x : 150,    //圆心的x轴坐标值
			y : 150,    //圆心的y轴坐标值
			r : 100      //圆的半径
		};
	var startRad = 0; // 起始弧度
	var endRad = Math.PI*2; // 结束弧度 0 < endRad <= 2
	var anticlockwise = false; // false: 顺时针画，true:逆时针画
	//沿着坐标点(100,100)为圆心、半径为50px的圆的顺时针方向绘制弧线
	ctx2.arc(circle.x, circle.y, circle.r, startRad, endRad, anticlockwise);    
	//按照指定的路径绘制弧线
	ctx2.stroke();
	ctx2.fill(); // 填充区域
}


/**
  * 画圆 arcTo(x1, y1, x2, y2, radius)
  */
var myCanvas3 = document.getElementById("myCanvas3");
if(myCanvas3.getContext){
    //获取对应的CanvasRenderingContext2D对象(画笔)
    var ctx3 = myCanvas3.getContext("2d");  
    
    //指定绘制路径的起始点
    ctx3.moveTo(50, 50); 
    //注释掉lineTo()，不再先绘制直线   
    ctx3.lineTo(140, 30);
    
    //此时，坐标点(140,30)就是绘制弧线时的当前端点
    
    //端点1
    var p1 = {
    	x : 260,
    	y : 50
    };
    //端点2
    var p2 = {
    	x : 240,
    	y : 100    		
    };
    //绘制与当前端点、端点1、端点2三个点所形成的夹角的两边相切并且半径为80px的圆的一段弧线
    ctx3.arcTo(p1.x, p1.y, p2.x, p2.y, 80);
    
    ctx3.lineWidth = 10;
    //设置线条颜色为蓝色
    ctx3.strokeStyle = "blue";
    //按照上述绘制路径绘制弧线
    ctx3.stroke();
}


/**
  * 画布制图（颜色过度）
  */
var myCanvas4 = document.getElementById("myCanvas4");
if(myCanvas4.getContext) {
	var ctx4 = myCanvas4.getContext("2d");
	//定一个变量，线性渐变
	var grd = ctx4.createLinearGradient(0, 0, 500, 0); //（xStart,yStart）起点，（xEnd,yEnd）终点
	grd.addColorStop(0, '#ff0'); //offset范围是0~1之间的浮点数，color是关键颜色
	grd.addColorStop(0.5, '#f30');
	grd.addColorStop(1, '#7fc259');
	ctx4.fillStyle = grd;
	ctx4.fillRect(0, 0, 500, 500);

	//径向渐变
	ctx4.beginPath(); //开始
	var grdCirle = ctx4.createRadialGradient(100, 100, 50, 100, 100, 100);
	//(xStart,yStart,radiusStart)起点圆的中心点坐标和半径，（xEnd,yEnd,radiusEnd）终点圆的中心点坐标和半径
	grdCirle.addColorStop(0, "#f7f8fa"); //起点
	grdCirle.addColorStop(0.5, "red");
	grdCirle.addColorStop(1, "#53c5d9"); //终点
	ctx4.fillStyle = grdCirle;
	ctx4.arc(100, 100, 100, 0, 2 * Math.PI); //画一个圆
	ctx4.fill(); //填充
	ctx4.closePath(); //关上

	ctx4.beginPath();
	var graA = ctx4.createRadialGradient(300, 100, 50, 310, 110, 20);
	graA.addColorStop(0, "#632cd2");
	graA.addColorStop(0.3, "#91bd1c");
	graA.addColorStop(0.7, "#e06a29");
	graA.addColorStop(1, "#27cd46");
	ctx4.fillStyle = graA;
	ctx4.arc(300, 100, 100, 0, 2 * Math.PI);
	ctx4.fill();
	ctx4.closePath();

	ctx4.translate(250, 250);//移动坐标原点
	//坐标变换
	for(var i = 0; i < 30; i++) {
		ctx4.rotate(Math.PI/10);//旋转角度
		ctx4.scale(0.95,0.95);//缩小比例
		ctx4.beginPath();
		ctx4.fillStyle = "rgba(255,157,0,0.5)";
		ctx4.fillRect(100, 100, 120, 60);
		ctx4.closePath();
	}
}


/**
  * 画布制图（直接放图片）
  */
var myCanvas5 = document.getElementById("myCanvas5");
if(myCanvas5.getContext) {
	var ctx5 = myCanvas5.getContext("2d");
	var img=new Image();
	img.src="flower.png"; // 图片地址
	cxt5.drawImage(img,0,0);
}

HTML5 Canvas几种画法