canvas全了解

canvas自身是無法跨域的，需背景擷取圖檔後轉base64傳給前端使用

或者直接nginx處理

https://blog.csdn.net/beyond__devil/article/details/82467358

https://www.jianshu.com/p/0fa744dd674b

https://www.jianshu.com/p/1dd0b3b5b14c

canvas全了解

demo1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#c1{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<html>
			<body>
				<!--canvas預設寬300px 高150px，canvas一定要在标簽上寫寬高，css寫會自動轉化成倍數，而不是真正的寬高-->
				<canvas id="c1" width="400px" height="400px"></canvas>
			</body>
		</html>
		<script>
			window.onload = function(){
				var c1 = document.getElementById('c1');
				//擷取2d繪制環境
				var c1o = c1.getContext('2d');
				
				//設定實心的顔色
				c1o.fillStyle = 'blue';
				//設定邊框顔色
				c1o.strokeStyle = 'green';
				
				//設定邊框大小，不能帶機關，預設px
				c1o.lineWidth = 10;
				
				//設定邊框圓角
				c1o.lineJoin = 'round';
				
				//繪制一個實心預設黑色的正方形，x,y,w,h,預設機關px
				c1o.fillRect(50.5, 50.5, 100, 100);
				
				//繪制一個空心預設黑色邊框的正方形，x,y,w,h,預設機關px
				c1o.strokeRect(50.5, 50.5, 100, 100);
			}
		</script>
	</body>
</html>

demo2

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#c1{
				background-color: red;
			}
		</style>
	</head>

	<body>
		<html>
			<body>
				<!--canvas預設寬300px 高150px，canvas一定要在标簽上寫寬高，css寫會出bug-->
				<canvas id="c1" width="400px" height="400px"></canvas>
			</body>
		</html>
		<script>
			window.onload = function(){
				var c1 = document.getElementById('c1');
				//擷取2d繪制環境
				var c1o = c1.getContext('2d');
				//儲存路徑，與.restore()形成一個作用域
				c1o.save();
				c1o.fillStyle='yellow';
				//開始繪圖
				c1o.beginPath();
				//把路徑移動到畫布中的指定點，不建立線條
				c1o.moveTo(100,100);
				//添加一個新點，然後在畫布中建立從該點到最後指定點的線條
				c1o.lineTo(200,200);
				c1o.lineTo(300,200);
				//建立從目前點回到起始點的路徑
				c1o.closePath();
				//繪制已定義的路徑
				c1o.fill();
				//恢複路徑
				c1o.restore();
				
				//有2個圖形繪制時就起到了很好的區分填充還是繪制的作用
				c1o.beginPath();
				c1o.moveTo(100,200);
				c1o.lineTo(200,300);
				c1o.lineTo(300,300);
				c1o.closePath();
				//填充圖形
				c1o.fill();
				
			}
			</script>
	</body>

</html>

demo3繪制移動的正方形

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#c1{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<html>
			<body>
				<!--canvas預設寬300px 高150px，canvas一定要在标簽上寫寬高，css寫會出bug-->
				<canvas id="c1" width="400px" height="400px"></canvas>
			</body>
		</html>
		<script>
			window.onload = function(){
				var c1 = document.getElementById('c1');
				//擷取2d繪制環境
				var c1o = c1.getContext('2d');
				
				var num = 0;
				c1o.fillRect(0,0,100,100);
				setInterval(function(){
					num++;
					//清除畫布，注意對象是畫布
					c1o.clearRect(0,0,c1.width,c1.height);
					c1o.fillRect(num,num,100,100);
				},30);
				
			}
			</script>
	</body>

</html>

demo3

var c1 = document.getElementById('c1');
				//擷取2d繪制環境
				var c1o = c1.getContext('2d');
				
				c1o.moveTo(200,200);
				//畫弧線
				c1o.arc(200,200,150,0,90*Math.PI/180,false);
				
				c1o.stroke();

demo4

var c1 = document.getElementById('c1');
				//擷取2d繪制環境
				var c1o = c1.getContext('2d');
				
				c1o.beginPath();
				
				c1o.moveTo(100,100);
				c1o.lineTo(200,100);
				//建立兩切線之間的弧/曲線
				c1o.arcTo(300,100,300,200,100);
				c1o.lineTo(300,200);
				
				c1o.stroke();

ctx.moveTo(20,20); // 建立開始點

ctx.lineTo(100,20); // 建立水準線

ctx.arcTo(150,20,150,70,50); // 建立弧

ctx.lineTo(150,120); // 建立垂直線

ctx.stroke(); // 進行繪制

window.onload = function(){
				var c1 = document.getElementById('c1');
				//擷取2d繪制環境
				var c1o = c1.getContext('2d');
				
				c1o.beginPath();
				//重新設定左上0，0定點
				c1o.translate(100,100);
				//旋轉角度，注意*Math.PI
				c1o.rotate(45*Math.PI/180);
				//設定放大放小比例
				c1o.scale(2,2);
				c1o.fillRect(0,0,100,100);
				
//				var num = 0;
//				c1o.fillRect(0,0,100,100);
//				setInterval(function(){
//					num++;
//					//清除畫布，注意對象是畫布
//					c1o.clearRect(0,0,c1.width,c1.height);
//					c1o.fillRect(num,num,100,100);
//				},30);
				
			}

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#c1{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<html>
			<body>
				<!--canvas預設寬300px 高150px，canvas一定要在标簽上寫寬高，css寫會出bug-->
				<canvas id="c1" width="400px" height="400px"></canvas>
				<img id="img1" src="./ggg.jpeg" />
			</body>
		</html>
		<script>
			window.onload = function(){
				var c1 = document.getElementById('c1');
				//擷取2d繪制環境
				var c1o = c1.getContext('2d');
				//初始化圖檔
				var lxf = new Image();
				//初始化圖檔完成後執行
				lxf.onload = function(){
					draw(this);
				}
				lxf.src = './lxf.jpg';
				function draw(obj){
					//向畫布上繪制圖像、畫布或視訊
					c1o.drawImage(obj,0,0,400,400);
				}
				
				var img1 = document.getElementById('img1');
				var img1View = new Image();
				
				img1View.onload = function(){
					draw2(img1);
				}
				
				img1View.src = img1.src;
				
				function draw2(obj){
					//建立一個标簽
					var oc = document.createElement('canvas');
					//建立繪制環境
					var ogc = oc.getContext('2d');
					//js設定畫布寬高
					oc.width = obj.width;
					oc.height = obj.height;
					//覆寫
					obj.parentNode.replaceChild(oc,obj);
					//繪畫
					ogc.drawImage(obj,0,0);
				}
				
			}
			</script>
	</body>

</html>

var c1 = document.getElementById('c1');
				//擷取2d繪制環境
				var c1o = c1.getContext('2d');
				//初始化圖檔
				var lxf = new Image();
				//初始化圖檔完成後執行
				lxf.onload = function(){
					draw(this);
				}
				lxf.src = './lxf.jpg';
				function draw(obj){
					//建立背景
					var bg = c1o.createPattern(obj,'repeat');
					//填充背景
					c1o.fillStyle = bg;
					
					c1o.fillRect(0,0,300,300);
				}

window.onload = function(){
				var c1 = document.getElementById('c1');
				//擷取2d繪制環境
				var c1o = c1.getContext('2d');
				//初始化圖檔
				var lxf = new Image();
				//初始化圖檔完成後執行
				lxf.onload = function(){
					draw(this);
				}
				lxf.src = './lxf.jpg';
				function draw(obj){
					//向畫布上繪制圖像、畫布或視訊
					
					c1o.drawImage(obj,0,0,400,400);
					//設定字大小和字型
					c1o.font = '60px impact';
					//以上為标準線
					c1o.textBaseline = 'top';
					//擷取字型的寬度
					var w = c1o.measureText('劉曉飛').width;
					
					//在畫布上繪制“被填充的”文本，(c1.width - w)/2可讓字居中
					c1o.fillText('劉曉飛',(c1.width - w)/2,(c1.height-60)/2);
				}
				
			}

window.onload = function(){
				var c1 = document.getElementById('c1');
				//擷取2d繪制環境
				var c1o = c1.getContext('2d');
				//初始化圖檔
				var lxf = new Image();
				//初始化圖檔完成後執行
				lxf.onload = function(){
					draw(this);
				}
				lxf.src = './lxf.jpg';
				function draw(obj){
					//向畫布上繪制圖像、畫布或視訊
					
					c1o.drawImage(obj,0,0,400,400);
					//設定字大小和字型
					c1o.font = '60px impact';
					//設定陰影x軸偏移量
					c1o.shadowOffsetX = '10';
					c1o.shadowOffsetY = '10';
					//設定模糊值
					c1o.shadowBlur = '5';
					//設定陰影顔色
					c1o.shadowColor = 'yellow';
					//以上為标準線
					c1o.textBaseline = 'top';
					//擷取字型的寬度
					var w = c1o.measureText('劉曉飛').width;
					
					//在畫布上繪制“被填充的”文本，(c1.width - w)/2可讓字居中
					c1o.fillText('劉曉飛',(c1.width - w)/2,(c1.height-60)/2);
				}
				
			}

window.onload = function(){
				var c1 = document.getElementById('c1');
				//擷取2d繪制環境
				var c1o = c1.getContext('2d');
				
				c1o.fillRect(0,0,100,100);
				//擷取圖像像素
				var img1 = c1o.getImageData(0,0,100,100);
				//放置擷取到的圖像
				c1o.putImageData(img1,100,100);
				
				alert(c1.toDataURL());
			}

canvas全了解

繼續閱讀

怎樣使用SpringMVC控制頁面

Spring MVC 接收多個實體參數

CSS中僞類和僞元素的差別

Vue項目 - 單檔案元件和Vue中的路由

HTML5Canvas 酷炫效果

左耳朵耗子：程式員如何拿到年薪60萬的崗位？

沒救了! 困擾程式員一輩子的5個魔咒, 改掉比登天還難！

[轉]如何成長為一名全棧工程師全棧工程師

underscore模闆功能的使用和學習

CSS之折疊菜單

web開發之前後端渲染

JavaScript的那些坑之事件代理事件代理事件階段

ACS基本配置-權限等級管理

vue （vue2.0）使用總結(從大體結構總結)

父子元件間傳值的實作父子元件間傳值的實作

vue搭建過程及出現問題