01.canvas简单的认识
canvas 是html5提供给我们的一个绘图标签 默认大小 300X150 背景透明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas简单的认识</title>
</head>
<body>
<canvas id="myCanvas" style="border:1px solid #ddd;display:block;margin:20px auto;"></canvas>
</body>
</html>
效果图 如下 查看案例
var myCanvas=document.getElementById("myCanvas");
myCanvas.width="500";
myCanvas.height="300";
var cxt=myCanvas.getContext("2d");
cxt.fillStyle="#f0f";
cxt.fillRect(50,50,200,100);
效果图 如下 查看案例
<script>
var myCanvas=document.getElementById("myCanvas");
myCanvas.width="500";
myCanvas.height="300";
var cxt=myCanvas.getContext("2d");
//画三角形
cxt.moveTo(50,50);
cxt.lineTo(250,100);
cxt.lineTo(50,200);
cxt.lineTo(50,50);
//画直线
cxt.moveTo(350,50);
cxt.lineTo(350,200);
//定义画线样式
cxt.strokeStyle="red";
cxt.lineWidth="5";
cxt.lineCap="round";
cxt.stroke();
效果图 如下 查看案例
<script>
var myCanvas=document.getElementById("myCanvas");
myCanvas.width="500";
myCanvas.height="300";
var cxt=myCanvas.getContext("2d");
//方法一
cxt.moveTo(100,50);
cxt.lineTo(300,50);
cxt.lineTo(300,200);
cxt.lineTo(100,200);
cxt.lineTo(100,50);
cxt.fill();
//cxt.stroke();
//方法二
// /cxt.strokeStyle="red";
cxt.fillStyle="red";
cxt.fillRect(0,0,300,40);
//cxt.strokeRect(0,0,300,40);
</script>
效果图 如下 查看案例
<script>
var myCanvas=document.getElementById("myCanvas");
myCanvas.width="500";
myCanvas.height="300";
var cxt=myCanvas.getContext("2d");
//方法一
cxt.moveTo(100,50);
cxt.lineTo(300,50);
cxt.lineTo(300,200);
cxt.lineTo(100,200);
cxt.lineTo(100,50);
cxt.fill();
//cxt.stroke();
//方法二
//cxt.strokeStyle="red";
//cxt.strokeRect(0,0,300,40);
cxt.fillStyle="red";
cxt.fillRect(0,0,300,40);
效果图 如下 查看案例
<script>
var myCanvas=document.getElementById("myCanvas");
myCanvas.width="500";
myCanvas.height="300";
var cxt=myCanvas.getContext("2d");
//空心圆
cxt.beginPath()
cxt.arc(250,150,100,0,Math.PI*2);
cxt.closePath();
cxt.stroke();
//空心圆
cxt.beginPath()
cxt.arc(250,150,50,0,Math.PI*2);
cxt.closePath();
cxt.fill();
//弧度
cxt.beginPath()
cxt.arc(250,150,130,Math.PI*3/2,Math.PI,true);
cxt.stroke();
cxt.closePath();
效果图 如下 查看案例
<script>
var myCanvas=document.getElementById("myCanvas");
myCanvas.width="500";
myCanvas.height="300";
var cxt=myCanvas.getContext("2d");
//添加图片
var img=new Image();
img.src="images/meizi.jpg";
img.onload=function(){
cxt.drawImage(img,85,40);
}
//添加文字
cxt.font="30px Arial";
cxt.fillStyle="red";
cxt.fillText("我女朋友",380,290);
cxt.strokeStyle="red";
cxt.strokeText("我女朋友",380,290);
效果图 如下 查看案例
08.canvas 橡皮擦 物体运动(本质是图形不断的擦除与绘制)
<script>
var myCanvas=document.getElementById("myCanvas");
myCanvas.width="500";
myCanvas.height="300";
var cxt=myCanvas.getContext("2d");
//圆
var x=10,y=10;
var a=490,b=290;
var duration=2000;
var cishu=2000/30;
var xstep=(a-x)/cishu;
var ystep=(b-y)/cishu;
function huayuan(x,y){
cxt.beginPath();
cxt.arc(x,y,10,0,Math.PI*2);
cxt.fillStyle="red";
cxt.fill();
}
huayuan();
var timer=setInterval(function(){
//橡皮擦
cxt.clearRect(x-11,y-11,22,22);
x+=xstep;
y+=ystep;
if(x>=a){
x=a;
y=b;
}
huayuan(x,y);
},30);
效果图 如下 查看案例
<script>
var myCanvas=document.getElementById("myCanvas");
myCanvas.width="500";
myCanvas.height="300";
var cxt=myCanvas.getContext("2d");
var canvaL=myCanvas.offsetLeft;
var canvaT=myCanvas.offsetTop;
myCanvas.onmousedown=function(e){
var ev=e||window.event;
var left=ev.clientX;
var top=ev.clientY;
var x=left-canvaL;
var y=top-canvaT;
cxt.moveTo(x,y);
myCanvas.onmousemove=function(e){
var ev=e||window.event;
var left=ev.clientX;
var top=ev.clientY;
var x=left-canvaL;
var y=top-canvaT;
cxt.lineTo(x,y);
cxt.stroke();
}
myCanvas.onmouseup=function(){
myCanvas.onmouseup=null;
myCanvas.onmousemove=null;
}
myCanvas.onmouseout=function(){
myCanvas.onmouseup=null;
myCanvas.onmousemove=null;
myCanvas.onmouseout=null;
}
}
效果图 如下 查看案例
<script>
var myCanvas=document.getElementById("myCanvas");
myCanvas.width="500";
myCanvas.height="300";
var ctx=myCanvas.getContext("2d");
//创建线性渐变对象
var lg=ctx.createLinearGradient(10,10,210,110);
lg.addColorStop(0,"red");
lg.addColorStop(1,"blue");
//带线性渐变矩形
ctx.fillStyle=lg;
ctx.fillRect(10,10,200,100);
//带线性渐变圆
var lg1=ctx.createLinearGradient(80,130,140,200);
lg1.addColorStop(0,"green");
lg1.addColorStop(1,"yellow");
ctx.beginPath();
ctx.arc(105,160,50,0,Math.PI*2);
ctx.fillStyle=lg1;
ctx.fill();
ctx.closePath();
</script>
效果图 如下 查看案例
<script>
var myCanvas=document.getElementById("myCanvas");
myCanvas.width="500";
myCanvas.height="300";
var ctx=myCanvas.getContext("2d");
//创建径向渐变对象
var rg=ctx.createRadialGradient(110,110,1,110,110,110);
rg.addColorStop(0,"#f00");
rg.addColorStop(0.5,"rgb(238,182,231)");
rg.addColorStop(1,"blue");
//带径向渐变矩形
ctx.fillStyle=rg;
ctx.fillRect(10,10,200,200);
//创建径向渐变的圆
var rg1=ctx.createRadialGradient(310,61,1,310,111,100);
rg1.addColorStop(0,"#fff");
rg1.addColorStop(1,"black");
ctx.beginPath();
ctx.arc(310,111,100,0,Math.PI*2);
ctx.fillStyle=rg1;
ctx.fill();
ctx.closePath();
</script>
效果图 如下 查看案例
<script>
var myCanvas=document.getElementById("myCanvas");
myCanvas.width="500";
myCanvas.height="300";
var ctx=myCanvas.getContext("2d");
var img=new Image();
img.src="images/flower.jpg";
img.onload=function(){
var tuan=ctx.createPattern(img,"repeat");
ctx.fillStyle=tuan;
ctx.fillRect(0,0,500,300);
}
</script>
效果图如下:查看案例
<script>
var myCanvas=document.getElementById("myCanvas");
myCanvas.width="500";
myCanvas.height="300";
var ctx=myCanvas.getContext("2d");
//画图 女汉子
var nvhanziImg=new Image();
nvhanziImg.src="images/nvhanzi.jpg";
nvhanziImg.onload=function(){
//ctx.drawImage(nvhanziImg,dx,dy,dw,dh);
ctx.drawImage(nvhanziImg,225,125,50,50);
}
//2 画精灵图片
// source源 destination 目标地
var nvjingli=new Image();
nvjingli.src="images/jinglingnvhai.jpg";
var nv2={
x:82,
y:0,
w:84,
h:110
};
nvjingli.onload=function(){
//语法 ctx.drawImage(nvjingli,s.x,s.y,s.w,s.h,d.x,d.y,d.w,d.h);
ctx.drawImage(nvjingli,nv2.x,nv2.y,nv2.w,nv2.h,0,0,nv2.w/2,nv2.h/2);
}
//3.圣诞老人驾车
var shengdanP=[
{
x:0,
y:0,
w:220,
h:80
},
{
x:220,
y:0,
w:220,
h:80
},
{
x:440,
y:0,
w:220,
h:80
},
{
x:660,
y:0,
w:220,
h:80
},
];
var shengdanImg=new Image();
shengdanImg.src="images/christmas.jpg";
shengdanImg.onload=function(){
setInterval(pao