canvas入门笔记（上）
Canvas
Canvas简介
Canvas API 提供了一个通过JavaScript 和 HTML的``元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。
Canvas API 主要聚焦于 2D 图形。而同样使用元素的 WebGL API 则用于绘制硬件加速的 2D 和 3D 图形。
Canvas使用
在HTML页面当中新建一个画板
<canvas id="cont">
/*此处书写内容在高版本浏览器内无内容*/
canvas>
Step1
获取画布（必须使用原生js获取）
var canvas =document.querySelector('#cont')
Step2
获取画布上下文
var content =canvas.getContext('2d');
Step3
开启一条路径
content.beginPath();
Step4
确定画布起始点
content.moveTo(100,100);
Step5
确定画布结束点
content.lineTO(400,400);
Step6
着色
content.stroke()
Step
结束路径
content.closePath();
Canvas画直线
默认直线
<style>
#myline{
border: 1px solid black;
}
style>
<body>
<canvas id="myline" width="500" height="500">
canvas>
body>
<script>
//获取画布
var canvas=document.querySelector("#myline");
//获取上下文
var ct =canvas.getContext('2d');
//开始一条路径
ct.beginPath();
//画画起点
ct.moveTo(100,100);
//画画结束点
ct.lineTo(400,400);
//着色
ct.stroke();
//关闭路径
ct.closePath();
script>
效果图
自定义直线
在着色前 添加以下代码
//线条颜色
ct.strokeStyle='green';
//线条宽度
ct.lineWidth=5
完整代码
<style>
#myline{
border: 1px solid black;
}
style>
<body>
<canvas id="myline" width="500" height="500">
canvas>
body>
<script>
//获取画布
var canvas=document.querySelector("#myline");
//获取上下文
var ct =canvas.getContext('2d');
//开始一条路径
ct.beginPath();
//画画起点
ct.moveTo(100,100);
//画画结束点
ct.lineTo(400,400);
//着色前添加
//设置线条颜色
ct.strokeStyle='green'
//设置线条粗细
ct.lineWidth=5;
//着色
ct.stroke();
//关闭路径
ct.closePath();
script>
效果图
Canvas画矩形
绘制实心矩形
矩形样式
ct.fillStyle='red';
//
ct.fillRect(200,200,20,200)
效果图
绘制空心矩形
ct.strokeRect(180,200,20,200)
效果图
画随机柱形统计图
ct.fillStyle='red';
for(var i=0;i<7;i++){
var height =Math.random()*180+10;
ct.fillRect(120+i*40,300-height,20,height)
}
效果图
随机颜色统计图
ct.fillStyle='#'+parseInt(Math.random()*0xffffff).toString(16)
效果图
清除画布
ct.clearRect(x,y,width,height);
首先画一个矩形
<style>
#mycanvas{
display: block;
border: 1px solid black;
margin: 0 auto ;
}
style>
<body>
<canvas id="mycanvas" width="500" height="500"> canvas>
body>
<script>
var canvas =document.querySelector('#mycanvas');
var ct =canvas.getContext('2d');
ct.fillStyle='green'
ct.fillRect(200,200,200,200);
//清除画布内容
ct.clearRect(210,230,100,100)
script>
效果图
Canvas圆与圆弧
圆
方法
ct.arc(x,y,radius,startAngle,endAngle,countclockwish)
/*
x:中心点坐标x
y:中心的坐标y
radius:半径
startAngle:开始的角度
endAngle:结束的角度
conutclockwish:旋转方向 false 顺时针，true逆时针
*/
0度起始点
画一个圆
<style>
#mycanvas{
margin: 0 auto;
border: 1px solid black;
display: block;
}
style>
<body>
<canvas id="mycanvas" width="500" height="500">canvas>
body>
<script>
var canvas =document.querySelector("#mycanvas");
var ct =canvas.getContext('2d');
ct.beginPath()
ct.arc(255,255,50,0,Math.PI*2,true)
ct.fillStyle='green' //填充样式
ct.fill() //填充
ct.lineWidth='5'
ct.stroke();
script>
效果图
圆弧
var canvas =document.querySelector("#mycanvas");
var ct =canvas.getContext('2d');
ct.beginPath()
ct.lineWidth='5'
ct.arc(255,400,50,1,2,false)
ct.stroke()
效果图
Canvas画茶杯Demo
var canvas =document.querySelector('#mycanvas');
var ct=canvas.getContext('2d');
//画一个茶杯
ct.beginPath();
ct.moveTo(100,200)
ct.lineTo(100,450)
ct.lineTo(300,450)
ct.lineTo(300,200)
ct.lineTo(100,200)
ct.lineWidth='3'
ct.stroke();
ct.closePath();
//画一个茶杯手柄
ct.beginPath();
ct.arc(300,325,50,-(Math.PI/2),Math.PI/2,false)
ct.lineWidth='3'
ct.stroke()
ct.closePath();
//热气
for(var i=0 ;i<4;i++){
ct.beginPath();
ct.arc(120+60*i,100,20,-Math.PI/2,Math.PI/2,true)
ct.arc(120+60*i,140,20,-Math.PI/2,Math.PI/2,false)
ct.stroke()
}
效果图
Canvas圆环加载条
var canvas =document.querySelector('#mycanvas');
var ct=canvas.getContext('2d');
var fnb=Math.PI/180;
var db=0;
var a=setInterval(()=>{
// console.log(fnb)
db+=fnb;
drowpic(db)
if(db>Math.PI*2){
clearTimeout(a)
}
},100)
var drowpic=function(fnb){
ct.beginPath();
ct.lineWidth='5'
ct.strokeStyle='red'
ct.arc(300,300,50,0,fnb,false);
ct.stroke();
ct.closePath();
}
效果图
Canvas碰撞小球
var canvas =document.querySelector('#mycanvas');
var ct=canvas.getContext('2d');
// 画布大小
var h=500;
var w=500;
//初始化
var x=40;
var y=50
//速度
var speedx=5;
var speedy=5;
setInterval(function(){
ct.clearRect(0,0,w,h)
x+=speedx;
y+=speedy;
if(x<=30 || x>=(w-50)){
speedx=-speedx;
}
if(y<=50 ||y>=(h-50)){
speedy= -speedy
}
ct.beginPath();
ct.arc(x,y,30,0,Math.PI*2,false)
ct.strokeStyle='green';
ct.fillStyle='green'
ct.fill();
ct.stroke();
},10)
效果图
动态
Canvas面向对象小球碰撞
var canvas =document.querySelector('#mycanvas');
var ct=canvas.getContext('2d');
var h=500;
var w=500;
//定义一个随机产生器
var ran=function(num){
return Math.random()*num;
}
//定义Ball球类
var Ball=function(){
//Ball球类属性=/初始点X，初始点Y，半价radius，颜色Color，水平速度Xspeed，垂直速度Yspeed
this.x=50;
this.y=50;
this.radius=ran(20)+10; //大小[10-30]
this.color='#'+parseInt(ran(0xffffff)).toString(16);
this.Xspeed=ran(4)+2; //速度[2-6]
this.Yspeed=ran(5)+2 //速度[2-7]
}
//放入页面的方法
Ball.prototype.show= function(){
//运动
this.run();
ct.beginPath();
ct.arc(this.x,this.y,this.radius,0,Math.PI*2,false);
ct.fillStyle=this.color;
ct.fill();
ct.stroke();
}
//运动方法
Ball.prototype.run=function(){
if(this.x<=30 || this.x>=(w-30)){
this.Xspeed=-this.Xspeed;
}
this.x+=this.Xspeed;
if(this.y<=30 ||this.y>=(h-30)){
this.Yspeed= -this.Yspeed;
}
this.y+=this.Yspeed;
}
//定义一个数组存放小球
var ballArray=[];
for(var i=1;i<=5;i++){
var ball=new Ball();
ballArray.push(ball);
ball.show();
}
//运动
setInterval(()=>{
ct.clearRect(0,0,w,h);
for(var j=0;j<ballArray.length;j++){
var ball= ballArray[j];
ball.show();
}
},50)
效果图
随机跳动
Canvas画文字
ct.fillText('hello',200,200)
实心文字
var canvas =document.querySelector('#mycanvas');
var ct=canvas.getContext('2d');
ct.fillStyle='red'
ct.font='100px 微软雅黑'
ct.fillText('Hello',200,200,50);
效果图
空心文字
var canvas =document.querySelector('#mycanvas');
var ct=canvas.getContext('2d');
ct.fillStyle='red'
ct.font='100px 微软雅黑'
ct.fillText('Hello',200,200);
//空心文字
ct.strokeStyle='yellow'
ct.strokeText('Hello',100,100)
效果图
,200)
### 实心文字
~~~js
var canvas =document.querySelector('#mycanvas');
var ct=canvas.getContext('2d');
ct.fillStyle='red'
ct.font='100px 微软雅黑'
ct.fillText('Hello',200,200,50);
效果图
[外链图片转存中…(img-zwbvQoiY-1703316803433)]
空心文字
var canvas =document.querySelector('#mycanvas');
var ct=canvas.getContext('2d');
ct.fillStyle='red'
ct.font='100px 微软雅黑'
ct.fillText('Hello',200,200);
//空心文字
ct.strokeStyle='yellow'
ct.strokeText('Hello',100,100)
效果图
[外链图片转存中…(img-9SyJQL5A-1703316803433)]