canvas自身是无法跨域的，需后台获取图片后转base64传给前端使用
或者直接nginx处理
https://blog.csdn.net/beyond__devil/article/details/82467358
https://www.jianshu.com/p/0fa744dd674b
https://www.jianshu.com/p/1dd0b3b5b14c
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());
}