canvas的简单使用
2020-03-03 本文已影响0人
五四青年_4e7d
建立一个简单的模板
1.封装函数，建立容器，和canvas样式；
2.页面加载之后执行；
3.注意：canvas.getContext('2d')
<!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>
#canvas{
box-shadow: 0 0 10px #333;
margin:0 auto;
}
</style>
</head>
<body onload="draw()">
<canvas id="canvas" width="800" height="600"></canvas>
<script>
function draw(){
var canvas = document.getElementById('canvas')
if(canvas.getContext){
var ctx = canvas.getContext('2d') //理解为画笔
}
}
</script>
</body>
</html>
（填充的矩形）fill和（描边的矩形）stroke
描边矩形定义：
ctx.strokeStyle = 'rgba(0,0,0,0.4)'
ctx.strokeRect(10,10,300,300)
填充矩形定义：
ctx.fillStyle = 'red' //颜色
ctx.fillRect(20,20,300,300) //拿起画笔，filRect矩形
删除： ctx.clearRect(45,45,60,60);
<!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>
#canvas{
box-shadow: 0 0 10px #333;
margin:0 auto;
}
</style>
</head>
<body onload="draw()">
<canvas id="canvas" width="800" height="600"></canvas>
<script>
function draw(){
var canvas = document.getElementById('canvas')
if(canvas.getContext){
var ctx = canvas.getContext('2d') //理解为画笔
ctx.fillStyle = 'rgba(0,0,0,0.4)' //颜色
ctx.fillRect(10,10,300,300) //拿起画笔，filRect矩形
ctx.fillStyle = 'red' //颜色
ctx.fillRect(20,20,300,300) //拿起画笔，filRect矩形
}
}
</script>
</body>
</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>
#canvas{
box-shadow: 0 0 10px #333;
margin:0 auto;
}
</style>
</head>
<body onload="draw()">
<canvas id="canvas" width="800" height="600"></canvas>
<script>
function draw(){
var canvas = document.getElementById('canvas')
if(canvas.getContext){
var ctx = canvas.getContext('2d') //理解为画笔
//绘制三角形：
ctx.beginPath()
ctx.moveTo(75,50)
ctx.lineTo(100,75)
ctx.lineTo(100,25)
ctx.closePath()
ctx.stroke()
}
}
</script>
</body>
</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>
#canvas{
box-shadow: 0 0 10px #333;
margin:0 auto;
}
</style>
</head>
<body onload="draw()">
<canvas id="canvas" width="800" height="600"></canvas>
<script>
function draw(){
var canvas = document.getElementById('canvas')
if(canvas.getContext){
var ctx = canvas.getContext('2d') //理解为画笔
//绘制填充三角形：
ctx.beginPath()
ctx.moveTo(25,25)
ctx.lineTo(105,25)
ctx.lineTo(25,105)
ctx.fill()
ctx.beginPath()
ctx.moveTo(125,125)
ctx.lineTo(125,45)
ctx.lineTo(45,125)
ctx.closePath()
ctx.stroke()
}
}
</script>
</body>
</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>
#canvas{
box-shadow: 0 0 10px #333;
margin:0 auto;
}
</style>
</head>
<body onload="draw()">
<canvas id="canvas" width="800" height="600"></canvas>
<script>
function draw(){
var canvas = document.getElementById('canvas')
if(canvas.getContext){
var ctx = canvas.getContext('2d') //理解为画笔
ctx.strokeStyle = 'orange'
ctx.LineWidth = 20
//画圆
// ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise)
// ctx.arc(400,300,150,0,Math.PI * 2)
// ctx.arc(400,300,150,0,Math.PI * 1.5)
ctx.arc(400,300,150,0,Math.PI / 2 * 1.5)
ctx.stroke()
}
}
</script>
</body>
</html>
笑脸：
image.png
<!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>
#canvas{
box-shadow: 0 0 10px #333;
margin:0 auto;
}
</style>
</head>
<body onload="draw()">
<canvas id="canvas" width="800" height="600"></canvas>
<script>
function draw(){
var canvas = document.getElementById('canvas')
if(canvas.getContext){
var ctx = canvas.getContext('2d') //理解为画笔
ctx.beginPath()
ctx.arc(75,75,50,0,Math.PI*2,true)
ctx.moveTo(110,75)
ctx.arc(75,75,35,0,Math.PI,false)
ctx.moveTo(65,65)
ctx.arc(60,65,5,0,Math.PI*2,true)
ctx.moveTo(95,65)
ctx.arc(90,65,5,0,Math.PI*2,true)
ctx.stroke()
}
}
</script>
</body>
</html>
渐变：
image.png
<!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>
#canvas{
box-shadow: 0 0 10px #333;
margin:0 auto;
}
</style>
</head>
<body onload="draw()">
<canvas id="canvas" width="800" height="600"></canvas>
<script>
function draw(){
var canvas = document.getElementById('canvas')
if(canvas.getContext){
var ctx = canvas.getContext('2d') //理解为画笔
var lingrad = ctx.createLinearGradient(0,0,0,150)
lingrad.addColorStop(0,'#cc6677')
lingrad.addColorStop(0.5,'#fff')
lingrad.addColorStop(0.5,'#c6c776')
ctx.fillStyle = lingrad;
ctx.fillRect(10,10,130,130)
}
}
</script>
</body>
</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>
#canvas{
box-shadow: 0 0 10px #333;
margin:0 auto;
}
</style>
</head>
<body onload="draw()">
<canvas id="canvas" width="800" height="600"></canvas>
<script>
function draw(){
var canvas = document.getElementById('canvas')
if(canvas.getContext){
var ctx = canvas.getContext('2d') //理解为画笔
var img = new Image();
img.src = 'https://img.yzcdn.cn/vant/apple-1.jpg';
//绘制图像确保图像加载完成：
img.onload = function(){
var ptrn = ctx.createPattern(img,'repeat')
ctx.fillStyle = ptrn ;
ctx.fillRect(0,0,800,600)
}
}
}
</script>
</body>
</html>
把图片裁剪：
image.png
<!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>
#canvas{
box-shadow: 0 0 10px #333;
margin:0 auto;
}
</style>
</head>
<body onload="draw()">
<canvas id="canvas" width="800" height="600"></canvas>
<script>
function draw(){
var canvas = document.getElementById('canvas')
if(canvas.getContext){
var ctx = canvas.getContext('2d') //理解为画笔
var img = new Image();
img.src = 'https://img.yzcdn.cn/vant/apple-1.jpg';
//绘制图像确保图像加载完成：
img.onload = function(){
ctx.beginPath()
ctx.arc(400,300,150,0,Math.PI*2)
ctx.fill()
ctx.clip()
ctx.drawImage(this,70,110)
}
}
}
</script>
</body>
</html>
