1. canvas（画布）
是HTML 5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图形
默认宽高为300px*150px
元素只是创造了一个固定大小的画布，要想在它上面绘制内容，我们需要找到它的渲染上下文
元素有一个getContex（）方法，这个方法是用来获取渲染上下文和它的绘画功能
基本用法：
<canvas id="cav" width="300px" height="150px"></canvas>
var canvas = document.querySelector("#cav")
var ctx = canvas.getContext("2d");
- js的简单绘制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<canvas id="canvas1" width="600" height="600">
这里的内容，正常的画布是不实现的，你的浏览器不支持canvas
</canvas>
<script type="text/javascript">
//1找到画布对象
var canvas1 = document.querySelector("#canvas1")
console.log([canvas1])
//2上下文对象(画笔)，2维平面绘制
var ctx = canvas1.getContext("2d")
console.log(ctx)
//3绘制路径
//x轴y轴坐标，长宽
ctx.rect(50,50,300,300)
//4填充
ctx.fillStyle = "aqua";
ctx.fill()
//5描边,渲染路径
ctx.lineWidth = 20
ctx.strokeStyle = "salmon"
ctx.stroke()
</script>
</body>
</html>
绘制路径
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<canvas id="canvas1" width="600" height="600"></canvas>
<script type="text/javascript">
var canvas1 = document.querySelector("#canvas1")
var ctx = canvas1.getContext('2d')
//设置开始路径
ctx.beginPath()
//设置绘制的起始点
ctx.moveTo(50,50)
//设置经过某个位置
ctx.lineTo(50,300)
//设置经过某个位置
ctx.lineTo(300,100)
//设置经过某个位置
ctx.lineTo(300,250)
//设置结束路径
ctx.closePath()
console.log(ctx)
//绘制路径
ctx.lineCap = "round"//起始路径的线段边缘设置为圆角
/* ctx.lineJoin = "round" */
ctx.miterLimit = 3 //设置或返回最大斜接长度。
ctx.strokeStyle = "aqua"
ctx.lineWidth = 20
ctx.stroke()
</script>
</body>
</html>
绘制图形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{padding: 0;margin: 0;}
</style>
</head>
<body>
<canvas width="600" height="600">
</canvas>
<script>
//柱状图
// var canvas=document.querySelector("canvas")
// var ctx=canvas.getContext("2d")
// var arr=[305,253,67,24,89,35,256]
// ctx.lineTo(50,500)
// ctx.lineTo(580,500)
// ctx.stroke()
// let h=500/(Math.max(...arr))
// for(let i=0;i<arr.length;i++){
// // ctx.beginPath()
// ctx.fillStyle="yellow"
// ctx.fillRect(100+70*i,500-h*arr[i],50,h*arr[i]);
// }
// </script>
<script>
//绘制时钟案列
// var canvas=document.querySelector("canvas")
// var ctx=canvas.getContext("2d")
// var deg=Math.PI/180
// function kedupan (){
// var x1=300
// var y1=300
// var r=150
// var kedu=10
// var startAnge=6;
// ctx.arc(x1,y1,r,0*deg,360*deg)
// for(let i=0;i<60;i++){
// let a;
// if(i%5){a=kedu}
// else{a=kedu*2}
// let R=r-a
// var y=y1+r*Math.sin(i*startAnge*deg)
// var x=x1+r*Math.cos(i*startAnge*deg)
// var y2=y1+R*Math.sin(i*startAnge*deg)
// var x2=x1+R*Math.cos(i*startAnge*deg)
// ctx.moveTo(x,y)
// ctx.lineTo(x2,y2)
// }
// ctx.stroke()
// }
// //秒钟
// function zhen (){
// var sr=120
// var s=new Date().getSeconds()
// ctx.moveTo(300,300)
// var x3=300+sr*Math.cos(s*6*deg)
// var y3=300+sr*Math.sin(s*6*deg)
// ctx.lineTo(x3,y3)
// ctx.stroke()
// }
// //分钟
// function fen (){
// var mh=60
// var m=new Date().getSeconds()
// ctx.moveTo(300,300)
// var x4=300+mh*Math.cos(m*6/60*deg)
// var y4=300+mh*Math.sin(m*6/60*deg)
// ctx.lineTo(x4,y4)
// ctx.stroke()
// }
// //小时
// function xiaoshi (){
// var hh=30
// var h=new Date().getSeconds()
// ctx.moveTo(300,300)
// var x5=300+hh*Math.cos(h*6/60/60*deg)
// var y5=300+hh*Math.sin(h*6/60/60*deg)
// ctx.lineTo(x5,y5)
// ctx.stroke()
// }
// setInterval(() => {
// canvas.width = canvas.width
// kedupan()
// zhen()
// fen()
// xiaoshi()
// }, 1000)
</script>
<script>
//canvas 元素自己属于图片
//大数据页面 echarts
// 心电图案列
// var canvas=document.querySelector("canvas")
// var ctx=canvas.getContext("2d")
// function dar (){
// var m=10
// for(let i=0;i<parseInt(600/m);i++){
// ctx.moveTo(0,i*m)
// ctx.lineTo(600,i*m)
// ctx.moveTo(i*m,0)
// ctx.lineTo(i*m,600)
// }
// ctx.stroke()
// ctx.beginPath()
// ctx.strokeStyle=""
// ctx.lineWidth=2
// ctx.moveTo(20,550)
// ctx.lineTo(20,50)
// ctx.lineTo(10,70)
// ctx.lineTo(30,70)
// ctx.lineTo(20,50)
// ctx.moveTo(20,550)
// ctx.lineTo(550,550)
// ctx.lineTo(530,540)
// ctx.lineTo(530,560)
// ctx.lineTo(550,550)
// ctx.stroke()
// }
// var x=50
// var arr=[34,153,45,123,52,143,34,39,73,48,245,54,178,338,42,63,252]
// setInterval(()=>{
// arr.push(Math.random()*(150-20)+20)
// },900)
// setInterval(()=>{
// //清除画板
// canvas.width=600
// x-=(20/3)
// dar()
// draa()
// },300)
// function draa (){
// ctx.beginPath()
// ctx.strokeStyle="yellow"
// ctx.lineWidth=2
// for (let i=0;i<arr.length;i++){
// ctx.lineTo(i*20+x,550-arr[i])
// }
// ctx.stroke()
// }
// 五角星案例
// var pen=canvas.getContext("2d")
// pen.moveTo(100,100)
// pen.lineTo(220,180)
// pen.moveTo(220,180)
// pen.lineTo(150,300)
// pen.moveTo(150,300)
// pen.lineTo(300,220)
// pen.moveTo(300,220)
// pen.lineTo(450,300)
// pen.moveTo(450,300)
// pen.lineTo(380,180)
// pen.moveTo(380,180)
// pen.lineTo(500,100)
// pen.moveTo(500,100)
// pen.lineTo(350,100)
// pen.moveTo(350,100)
// pen.lineTo(300,5)
// pen.moveTo(300,5)
// pen.lineTo(250,100)
// pen.moveTo(250,100)
// pen.lineTo(100,100)
// pen.stroke()
</script>
</body>
</html>
绘制文本
- 弹幕案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="canvas1" width="600" height="600"></canvas>
<script type="text/javascript">
var canvas1 = document.querySelector("#canvas1")
var ctx = canvas1.getContext('2d')
console.log(ctx)
ctx.font = "50px 微软雅黑"
//设置阴影
ctx.shadowBlur = 20; //阴影的模糊级别。
ctx.shadowColor= "rgba(0, 0, 0, 1)";//阴影的颜色。
ctx.shadowOffsetX= 10 //阴影与形状的水平距离。
ctx.shadowOffsetY= 10 //阴影与形状的垂直距离。
var x = 600;
setInterval(function(){
//清空画布，x y 长 宽
ctx.clearRect(0,0,600,600)
x-=3;
if(x<-100){
x = 600;
}
ctx.fillText("helloworld",x,100)
ctx.strokeText("中午吃啥？",x,200)
},16)
</script>
</body>
</html>
绘制图像
| 方法 | 描述 |
|---|---|
| drawImage() | 向画布上绘制图像、画布或视频。 |
根据不同数量的参数传入会是不同的渲染效果。
//ctx.drawImage(图片对象，x位置,y位置)
//ctx.drawImage(图片对象，x位置,y位置，宽度，高度)
//ctx.drawImage(图片对象，图像裁剪的位置x，图像裁剪y的位置，裁剪的宽度，裁剪的高度，放置的x位置,y位置，宽度，高度)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
<script type="text/javascript">
var canvas = document.querySelector("#canvas")
var ctx = canvas.getContext('2d')
//绘制图像
//ctx.drawImage(图片对象，x位置,y位置)
//ctx.drawImage(图片对象，x位置,y位置，宽度，高度)
//ctx.drawImage(图片对象，图像裁剪的位置x，图像裁剪y的位置，裁剪的宽度，裁剪的高度，放置的x位置,y位置，宽度，高度)
var img = new Image()
img.src = "img/image1.jpg"
//图片载入数据再绘制内容
img.onload = function(){
// ctx.drawImage(img,50,50)
}
var img2 = new Image()
img2.src = "img/image2.jpg"
img2.onload = function(){
ctx.drawImage(img2,50,0,500,400)
ctx.fillText("哈哈哈哈",500,380)//水印
}
</script>
</body>
</html>
canvas绘制时钟
上面有案列写了时钟的绘制，这里我们学习用另外一种方法来写，比较专业规范，有语法。
translate移动
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
<script type="text/javascript">
var canvas = document.querySelector("#canvas")
var cxt = canvas.getContext('2d')
//移动即是translate,会将画布的整个坐标尺进行移动
cxt.translate(300,0)
cxt.fillStyle = "deepskyblue"
cxt.fillRect(100,100,300,100)
cxt.fillStyle = "hotpink"
cxt.fillRect(0,0,100,100)
</script>
</body>
</html>
rotate旋转
例子：
<script type="text/javascript">
var canvas = document.querySelector("#canvas")
var cxt = canvas.getContext('2d')
cxt.fillStyle = "deepskyblue"
cxt.fillRect(100,0,300,100)
//旋转画布坐标尺
cxt.rotate(Math.PI/4)
cxt.fillStyle = "deepskyblue"
cxt.fillRect(100,0,300,100)
</script>
缩放scale
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
<script type="text/javascript">
var canvas = document.querySelector("#canvas")
var cxt = canvas.getContext('2d')
cxt.fillStyle = "hotpink"
cxt.fillRect(0,0,100,100)
//保留环境的状态(画笔的状态)
cxt.save()
cxt.scale(2,4)
cxt.fillStyle = "deepskyblue"
cxt.fillRect(100,0,300,100)
cxt.save()
//恢复之前保留的画笔状态，一层一层向上找
//cxt.scale(0.5,0.25)也可以还原缩放
cxt.restore()//恢复的第二个保留状态
cxt.restore()
cxt.fillRect(0,150,100,100)
</script>
</body>
</html>
时钟案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
<script type="text/javascript">
var canvas = document.querySelector("#canvas")
var cxt = canvas.getContext('2d')
function renderClock(){
//清除画布
cxt.clearRect(0,0,800,600)
cxt.save()
//将坐标移动到画布的中央
cxt.translate(400,300)
cxt.rotate(-2*Math.PI/4)
cxt.save()
//绘制表盘
cxt.beginPath()
//圆心坐标，r，起始角度，结束角度。
cxt.arc(0,0,200,0,2*Math.PI)
cxt.strokeStyle = "darkgrey"
cxt.lineWidth = 10
cxt.stroke()
cxt.closePath()
//绘制分钟刻度
for(var j=0;j<60;j++){
cxt.rotate(Math.PI/30)
cxt.beginPath()
cxt.moveTo(180,0)
cxt.lineTo(190,0)
cxt.lineWidth = 2;
cxt.strokeStyle = "orangered"
cxt.stroke()
cxt.closePath()
}
cxt.restore()
cxt.save()
//绘制时钟刻度
for(var i = 0;i<12;i++){
cxt.rotate(Math.PI/6)
cxt.beginPath()
cxt.moveTo(180,0)
cxt.lineTo(200,0)
cxt.lineWidth = 10;
cxt.strokeStyle = "darkgrey"
cxt.stroke()
cxt.closePath()
}
cxt.restore()
cxt.save()
var time = new Date()
var hour = time.getHours()
var min = time.getMinutes()
var sec = time.getSeconds()
//如果时间是大于12的话,就直接减去12
hour = hour>12?hour-12:hour
//绘制秒针
cxt.beginPath()
//根据秒针的时间进行旋转
cxt.rotate(2*Math.PI/60*sec)
cxt.moveTo(-30,0)
cxt.lineTo(170,0)
cxt.lineWidth = 2;
cxt.strokeStyle = "red"
cxt.stroke()
cxt.closePath()
cxt.restore()
cxt.save()
//绘制分针
cxt.beginPath()
//根据分针的时间进行旋转,一圈1小时，60分钟，3600秒
cxt.rotate(2*Math.PI/60*min+2*Math.PI/3600*sec)
cxt.moveTo(-20,0)
cxt.lineTo(150,0)
cxt.lineWidth = 4;
cxt.strokeStyle = "darkblue"
cxt.stroke()
cxt.closePath()
cxt.restore()
cxt.save()
//绘制时针
cxt.beginPath()
//根据时针的时间进行旋转
cxt.rotate(2*Math.PI/12*hour+2*Math.PI/60/12*min + 2*Math.PI/12/60/60*sec)
cxt.moveTo(-20,0)
cxt.lineTo(120,0)
cxt.lineWidth = 6;
cxt.strokeStyle = "darkslategray"
cxt.stroke()
cxt.closePath()
cxt.beginPath()
cxt.arc(0,0,10,0,2*Math.PI)
cxt.fillStyle = "deepskyblue";
cxt.fill()
cxt.closePath()
cxt.restore()
cxt.restore()
}
setInterval(function(){
renderClock()
},1000)
</script>
</body>
</html>
