canvas製圖

時間 2020-01-22

標籤 canvas 製圖简体版

原文原文鏈接

1、建立canvas畫布canvas

1.使用canvas標籤建立：<canvas id="mycanvas" width="200px" height="200px"></canvas>code

2.使用js代碼建立：圖片

var CANVAS_WIDTH=200,CANVAS_HEIGHT=200;
			window.onload=function(){
				createCanvas();
			}
			function createCanvas(){
				document.body.innerHTML="<canvas id=\"mycanvas\" width=\""+CANVAS_WIDTH+"\" height=\""+CANVAS_HEIGHT+"\"></canvas>"
			}

2、做圖ip

（1）塊級元素，都是成塊顯示的。get

window.onload=function(){
				var mycanvas=document.getElementById("mycanvas");
				var context=mycanvas.getContext("2d");
				context.fillStyle="antiquewhite";
				//context.rotate(45);//旋轉多少度
			//	context.scale(2,0.5);//縮放比例 他是在下面的這個基礎上面進行縮放
				//context.translate(200,200);//移動範圍，圖形會從下面的fillRect右移下移200
				context.fillRect(0,0,100,100);
			}
</script>

<canvas id="mycanvas" width="200px" height="200px" style="background-color: cornflowerblue;"></canvas>

（2）畫線。stroke()方法it

window.onload=function(){
			var mycanvas=document.getElementById("mycanvas");
			var context=mycanvas.getContext("2d");
			context.fillStyle="#4D4D4D";
			context.moveTo(0,0);
			context.lineTo(200,280);
			context.stroke();
			}

（3）圓形，,畫圓使用stroke（）或者fill（）方法,前者是畫線，後者是天填充型的io

        window.onload=function(){
            var c=document.getElementById("mycanvas");
            var context=c.getContext("2d");
            context.beginPath();
            context.arc(40,40,40,0,2*Math.PI);
            context.fill();
            //context.stroke();
            }

（4）文字文本方法調用：fillText(text,x,y),在canvas上繪製實心文本。strokeText(text,x,y);空心文本。此處的差別同上。function

window.onload=function(){
				var c=document.getElementById("mycanvas");
				var context=c.getContext("2d");
				context.font="30px 微軟雅黑";
				context.fillStyle="white"
				context.strokeText("hello",50,50);
				//context.fillText("hello",50,50)
			}

（5）漸變。線性漸變，圓形漸變，每一個畫布上不止一個漸變色。addcolorstop前面的數字表示位置所在地。以下：0.5在正中的時候爲正綠色。基礎

window.onload=function(){
			var c=document.getElementById("mycanvas");
			var ctx=c.getContext("2d");
			// Create gradien漸變的範圍，下面的參數就是顏色在X方向漸變在Y的方向是一個度
			var grd=ctx.createLinearGradient(0,0,200,0);
			grd.addColorStop(0,"red");
			grd.addColorStop(0.5,"green");
			grd.addColorStop(1,"white");
			ctx.fillStyle=grd;
			ctx.fillRect(10,10,150,80);
			}

（6）圖片方法

window.onload=function(){
			var c=document.getElementById("mycanvas");
			var context=c.getContext("2d");
			var img=document.getElementById("img");
			context.drawImage(img,10,10);
			}
<script>
<body>
	<img id="img" src="img/img2.jpeg" style="display: none;"/>
	<canvas id="mycanvas" width="300px" height="280px" style="background-color:azure;"></canvas>
</body>

（7）重疊顯示光圈

window.onload=function(){
				var canvas = document.getElementById("mycanvas");
				if(canvas==null){
					return false;
				}
				var context = canvas.getContext("2d");
				for(var i=0;i<=10;i++){
					context.beginPath();
					context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
					//context.closePath();
					context.fillStyle="rgba(255,0,0,0.25)";
					context.fill();
				}
			}

（8）重疊顯示圖案

window.onload=function(){
				var canvas = document.getElementById("mycanvas");
				if(canvas==null){
					return false;
				}
				var context = canvas.getContext("2d");
				context.fillStyle="rgba(255,0,60,0.5)";
				context.translate(200,200);
				context.fillRect(10,10,80,30);
				for(var i=0;i<50;i++){
					context.translate(20,20);
					context.scale(0.95,0.95);
					context.rotate(Math.PI/20);
				//	context.fill();
					context.fillRect(0,0,100,50);
				}
			}

總而言之，canvas用處很廣，更多的在於創造力。股票行情圖那種也是canvas。

方法API參照與：https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。