<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
body {
background: #000000;
}
canvas {
background: #ffffff;
transition: translate 0.5s;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
</body>
<script>
var oC = document.getElementById("canvas")
var oGC =oC.getContext("2d")
var yImg = new Image()
yImg.onload = function(){
draw(this)
}
yImg.src ="abc.png"
function draw(that){
var bg=oGC.createPattern(that,'repeat')
oGC.fillStyle = bg;
oGC.fillRect(0, 0, 300, 300);
}
</script>
</html>
canvas 渐变
http://www.w3school.com.cn/tags/canvas_createlineargradient.asp
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
body {
background: #000000;
}
canvas {
background: #ffffff;
transition: translate 0.5s;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
</body>
<script>
var oC = document.getElementById("canvas")
var oGC =oC.getContext("2d")
var obj =oGC.createLinearGradient(0, 0, 170, 0);
obj.addColorStop(1, "#ff0000");
obj.addColorStop(0,"rgba(0,233,2333,0.1)")
oGC.fillStyle = obj;
oGC.fillRect(0,0,150,100);
</script>
</html>
圆形渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
body {
background: #000000;
}
canvas {
background: #ffffff;
transition: translate 0.5s;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
</body>
<script>
var oC = document.getElementById("canvas")
var oGC =oC.getContext("2d")
var obj=oGC.createRadialGradient(
50,50,4,50,50,70
)
obj.addColorStop(0,"red")
obj.addColorStop(1, "blue");
oGC.fillStyle = obj;
oGC.arc(50, 50, 50, 0, 2*Math.PI, false);
oGC.fill();
oGC.stroke()
</script>
</html>