2. Java
  3. CANVAS基础教程

CANVAS基础教程

xiaoxiao2021-02-28  88
01.canvas简单的认识02.绘制 一个带有填充颜色的 矩形相关代码03.画线04.画矩形05.路径的开始与关闭06.canvas 画圆 画弧07.canvas 添加图片 添加文字08.canvas 橡皮擦 物体运动(本质是图形不断的擦除与绘制)09. canvas 鼠标画笔10.canvas 渐变线性渐变11.canvas 渐变之径向渐变12.canvas 填充--图案13.canvas 图片 之深入谈14.canvas save && restore15.canvas 坐标操作 移动(translate) 旋转(rotate) 缩放(scale)16.像素操作16.canvas像素操作_补充17.canvas 阴影18.canvas 裁剪19.canvas 图片保存20.图形组合21. canvas 事件操作20. cocos2d.js create.js jCanvasScript

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>

效果图 如下 查看案例

02.绘制 一个带有填充颜色的 矩形相关代码

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);

效果图 如下 查看案例

03.画线

<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();

效果图 如下 查看案例

04.画矩形

<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>

效果图 如下 查看案例

05.路径的开始与关闭

<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);

效果图 如下 查看案例

06.canvas 画圆 画弧

<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();

效果图 如下 查看案例

07.canvas 添加图片 添加文字

<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);

效果图 如下 查看案例

09. canvas 鼠标画笔

<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; } }

效果图 如下 查看案例

10.canvas 渐变线性渐变

<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>

效果图 如下 查看案例

11.canvas 渐变之径向渐变

<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>

效果图 如下 查看案例

12.canvas 填充--图案

<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>

效果图如下:查看案例

13.canvas 图片 之深入谈

<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,100); } var index=0; function

效果图 如下 查看案例

14.canvas save && restore

保存或者恢复 canvas 里的状态 (填充，描边，渐变，坐标位移,裁切)

<script> var myCanvas=document.getElementById("myCanvas"); myCanvas.width="500"; myCanvas.height="300"; var ctx=myCanvas.getContext("2d"); var lg=ctx.createLinearGradient(200,100,250,200); lg.addColorStop(0,"red"); lg.addColorStop(1,"blue"); ctx.strokeStyle="red"; ctx.strokeRect(0,0,50,100); ctx.save(); ctx.fillStyle=lg; ctx.strokeStyle="blue"; ctx.strokeRect(100,10,50,100); ctx.save(); ctx.restore(); ctx.restore(); ctx.strokeRect(200,10,50,100); ctx.fillRect(200,100,50,100); </script>

效果图如下 你是否能理解下面的绘制呢？ 查看案例

;

15.canvas 坐标操作 移动(translate) 旋转(rotate) 缩放(scale)

为了不影响canvas里其它的对象，我们在进行坐标变换前,先保存一下canvas状态 做完变换操作以后恢复原状态

<script> var drawRect=document.getElementById("drawRect"); myCanvas.width="500"; myCanvas.height="300"; var ctx=myCanvas.getContext("2d"); //绘制球 var x=0,y=0; setInterval(function(){ ctx.save(); ctx.clearRect(x-11,y-11,22,22); x+=5; y+=5; ctx.translate(x,y); ctx.beginPath(); ctx.arc(0,0,10,0,2*Math.PI,false); ctx.stroke(); ctx.closePath(); ctx.restore(); },100); </script>

效果图如下 查看案例

16.像素操作

<canvas id="myCanvas" style="border:1px solid #ddd;display:block;margin:auto"> </canvas> <canvas id="myCanvas2" style="border:1px solid red;display:block;margin:auto"> </canvas> <script> var myCanvas=document.getElementById("myCanvas"); var myCanvas2=document.getElementById("myCanvas2"); myCanvas2.width=myCanvas.width="500"; myCanvas2.height=myCanvas.height="300"; var ctx=myCanvas.getContext("2d"); var ctx2=myCanvas2.getContext("2d"); ctx.fillRect(10,10,200,100); ctx.beginPath(); ctx.arc(200,100,50,0,Math.PI*2); ctx.closePath(); ctx.fillStyle="red"; ctx.fill(); var imgData=ctx.getImageData(0,0,500,300); ctx2.putImageData(imgData,0,0); </script>

效果图如下 查看案例

16.canvas像素操作_补充

<div style="width:300px;margin:auto"> 原图 <img src="images/twodog.jpg" alt=""> canvas处理后 </div> <canvas id="myCanvas" style="border:1px solid #ddd;display:block;margin:auto"> </canvas> <script> var CANVAS_WIDTH=300; var CANVAS_HEIGHT=200; var myCanvas=document.getElementById("myCanvas"); myCanvas.width=CANVAS_WIDTH; myCanvas.height=CANVAS_HEIGHT; var ctx=myCanvas.getContext("2d"); var img=new Image(); img.src="images/twodog.jpg"; img.onload=function(){ ctx.drawImage(img,0,0,CANVAS_WIDTH,CANVAS_HEIGHT); var imgData=ctx.getImageData(0,0,CANVAS_WIDTH,CANVAS_HEIGHT); var pixcelNums=CANVAS_WIDTH*CANVAS_HEIGHT; for(var i=0;i<pixcelNums;i++){ imgData.data[i*4+0]=0; /*imgData.data[i*4+1]=0; imgData.data[i*4+2]=0; imgData.data[i*4+3]=0;*/ } ctx.putImageData(imgData,0,0); } </script>

效果图如下: 查看案例

17.canvas 阴影

说明 属性 阴影偏移 shadowOffsetX,shadowOffsetY 阴影颜色 shadowColor 阴影模糊 shadowBlur <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas 阴影 </title> <style> canvas{box-shadow: 0px 0px 10px #f00; } </style> </head> <body> <canvas id="myCanvas" style="border:1px solid #ddd;display:block;margin:auto"> </canvas> </body> </html> <script> var CANVAS_WIDTH=300; var CANVAS_HEIGHT=200; var myCanvas=document.getElementById("myCanvas"); myCanvas.width=CANVAS_WIDTH; myCanvas.height=CANVAS_HEIGHT; var ctx=myCanvas.getContext("2d"); var img=new Image(); img.src="images/twodog.jpg"; img.onload=function(){ ctx.shadowColor="#222"; ctx.shadowBlur="10"; ctx.shadowOffsetX="5"; ctx.shadowOffsetY="5"; ctx.drawImage(img,(CANVAS_WIDTH-200)/2,(CANVAS_HEIGHT-100)/2,200,100); } </script>

效果图如下 查看案例

;

18.canvas 裁剪

设置好裁剪路径 之后绘制的图形 只能显示裁剪路径里面的

<script> var CANVAS_WIDTH=300; var CANVAS_HEIGHT=200; var myCanvas=document.getElementById("myCanvas"); myCanvas.width=CANVAS_WIDTH; myCanvas.height=CANVAS_HEIGHT; var ctx=myCanvas.getContext("2d"); ctx.beginPath(); ctx.arc(150,100,80,0,2*Math.PI); ctx.closePath(); var guniang=new Image(); guniang.src="images/guniang.jpg"; guniang.onload=function(){ ctx.save(); ctx.clip(); ctx.drawImage(guniang,50,0,200,200); ctx.restore(); } ctx.fillText("女朋友",250,150,50,50); </script>

效果图如下 查看案例

19.canvas 图片保存

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas 图片保存 </title> </head> <body> <div style="width:900px;text-align: center;margin:0 auto;"> 图片 <img id="tupian" src="" alt="图片暂时没有" style="vertical-align: middle"> <br/> canvas <canvas style="vertical-align: middle" id="myCanvas" style="border:1px solid #ddd;margin:auto"> </canvas> </div> </body> </html> <script> var CANVAS_WIDTH=300; var CANVAS_HEIGHT=200; var myCanvas=document.getElementById("myCanvas"); var tupian=document.getElementById("tupian"); myCanvas.width=CANVAS_WIDTH; myCanvas.height=CANVAS_HEIGHT; var ctx=myCanvas.getContext("2d"); var guniang=new Image(); guniang.src="images/huaituzi.jpg"; guniang.onload=function(){ ctx.drawImage(guniang,50,40,200,119); ctx.moveTo(0,0); ctx.lineTo(CANVAS_WIDTH,CANVAS_HEIGHT); ctx.stroke(); var dataStr=myCanvas.toDataURL(); tupian.src=dataStr; //location.href=dataStr; } </script>

效果图如下 查看案例

20.图形组合

调节透明度 globalAlpha

单词 destionation source

globalCompositeOperation 图形组合操作

值 说明 source-over 目标图像上显示源图像。 destination-over 源图像上方显示目标图像。 source-atop 目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的 destination-atop 源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。 source-in 在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。 destination-in 在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。 source-out 在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。 destination-out 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。 lighter 显示源图像 + 目标图像。 copy 显示源图像。忽略目标图像。 xor 使用异或操作对源图像与目标图像进行组合。 <script> var CANVAS_WIDTH=300; var CANVAS_HEIGHT=300; var myCanvas=document.getElementById("myCanvas"); myCanvas.width=CANVAS_WIDTH; myCanvas.height=CANVAS_HEIGHT; //ctx.globalAlpha=0.5; var compositeArr=[ "source-over","destination-over", "source-atop","destination-atop", "destination-in","source-in", "source-out","destination-out", "lighter","copy","xor" ]; var i=0,l=compositeArr.length; draw(compositeArr[i]); setInterval(function(){ i++; if(i==l){ i=0; } draw(compositeArr[i]); },1000); function draw(type){ var ctx=myCanvas.getContext("2d"); ctx.clearRect(0,0,300,300); ctx.fillStyle="blue"; ctx.fillRect(0,0,100,100); ctx.globalCompositeOperation=type; ctx.beginPath(); ctx.arc(100,100,100,0,Math.PI*2); ctx.fillStyle="red"; ctx.fill(); ctx.closePath(); ctx.globalCompositeOperation="source-over"; ctx.font="30px Arial"; ctx.strokeText(compositeArr[i],0,250); } </script>

效果图如下 查看案例

21. canvas 事件操作

isPointInPath(x,y) 判断坐标为x,y的点是否再当前路径

<script> var CANVAS_WIDTH=300; var CANVAS_HEIGHT=300; var myCanvas=document.getElementById("myCanvas"); myCanvas.width=CANVAS_WIDTH; myCanvas.height=CANVAS_HEIGHT; var huabi=myCanvas.getContext("2d"); huabi.fillRect(10,10,100,100); huabi.strokeStyle="red"; huabi.strokeRect(110,110,100,100); function drawCircle(){ huabi.beginPath(); huabi.arc(160,60,50,0,Math.PI*2); huabi.stroke(); huabi.closePath(); } drawCircle(); function drawSanjiao(){ huabi.beginPath(); huabi.moveTo(60,110); huabi.lineTo(110,210); huabi.lineTo(10,210); huabi.lineTo(60,110); huabi.stroke(); huabi.closePath(); } drawSanjiao(); myCanvas.onclick=function(event){ var e=event||window.event; var x=e.clientX-myCanvas.offsetLeft; var y=e.clientY-myCanvas.offsetTop; if(x>=10&&x<=110&&y>=10&&y<=110){ alert("你点中了黑色矩形"); }else if(x>=110&&x<=210&&y>=110&&y<=210){ alert("你点中了红色矩形"); }else{ drawCircle(); if(huabi.

效果图如下 查看案例

 

转载请注明原文地址: https://www.6miu.com/read-45877.html

技术

最新回复(0)