原文链接: http://www.shitu91.com/cms/canvasSub/index.html
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