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搭建过程及出现问题