一.Canvas的基本使用
首先在使用Canvas一般先在<body>中添加:
1 <canvas id="Canvas" width="200" height="200"></canvas>
然后使用Js进行获取canvas和创建画笔:
<script> var Canvas = document.getElementById("Canvas"); var pen = Canvas.getContext("2d"); </script>
继续将创建的画笔绘制一个圆:
<script> var Canvas = document.getElementById("Canvas"); var pen = Canvas.getContext("2d"); pen.fillStyle = "#3648DA"; pen.beginPath() pen.arc(100,100,10,0,2*Math.PI); pen.stroke() </script>
二.JS&Canvas的相关属性
1.颜色、样式和阴影
fillStyle ------ 设置或返回用于填充绘画的颜色、渐变或模式。
fillRect()
<script> var Canvas = document.getElementById("Canvas"); var pen = Canvas.getContext("2d"); pen.fillStyle = "#3648DA"; //设置填充颜色 pen.fillRect(20,20,150,100); </script>
strokeStyle ------------ 设置或返回用于笔触的颜色、渐变或模式。
strokeRect()
<script> var Canvas = document.getElementById("Canvas"); var pen = Canvas.getContext("2d"); pen.strokeStyle = "blue"; pen.fillRect(20,20,150,100); </script>
shadowColor --------- 设置或返回用于阴影的颜色。
shadowBlur --------- 设置或返回用于阴影的模糊级别。
<script> var Canvas = document.getElementById("Canvas"); var pen = Canvas.getContext("2d"); pen.shadowBlur = 44; //模糊度 pen.shadowColor = "black"; //阴影颜色 pen.fillStyle="blue"; pen.fillRect(20,20,150,100); </script>
shadowOffsetX -------- 设置或返回阴影与形状的水平距离。
shadowOffsetY -------- 设置或返回阴影与形状的垂直距离。
<script> var Canvas = document.getElementById("Canvas"); var pen = Canvas.getContext("2d"); pen.shadowBlur = 44; pen.shadowColor = "black"; pen.shadowOffsetX=30; pen.shadowOffsetY=20; pen.fillStyle="blue"; pen.fillRect(20,20,150,100); </script>
createLinearGradient() --------- 创建线性渐变(用在画布内容上)。
<script> var c=document.getElementById("Canvas"); //获取画布 var ctx=c.getContext("2d"); //创建2d画笔 var grd=ctx.createLinearGradient(0,0,170,0); //创建线性渐变 grd.addColorStop(0,"black"); //起始位置 grd.addColorStop(1,"white"); //结束位置 ctx.fillStyle=grd; ctx.fillRect(20,20,150,100); </script>
createPattern(object,model) ------- 在指定的方向上重复指定的元素。
<script> var c=document.getElementById("Canvas"); //获取画布 var ctx=c.getContext("2d"); //创建2d画笔 ctx.clearRect(0,0,200,200); //清除 var earth = document.getElementById("earth"); //获取 var pat=ctx.createPattern(earth,"repeat"); //创建模式 ctx.rect(0,0,220,128); // ctx.fillStyle=pat; //填充 ctx.fill(); </script>
createRadialGradient ------ 创建放射状/环形的渐变(用在画布内容上)。
addColorStop() -------- 在指定的方向上重复指定的元素。
1 <script> 2 var canvas = document.getElementById("Canvas"); 3 var ctx = canvas.getContext("2d"); 4 5 var grd = ctx.createLinearGradient(75,50,5,90,60,100); 6 grd.addColorStop(0,"red"); 7 grd.addColorStop(1,"white"); 8 ctx.fillStyle = grd; 9 ctx.fillRect(10,10,150,100); 10 </script>
2.线条样式
lineCap -------- 设置或返回线条的结束端点样式。
lineWidth -------- 设置或返回当前的线条宽度。
var canvas = document.getElementById("Canvas"); var ctx = canvas.getContext("2d"); var grd = ctx.createLinearGradient(75,50,5,90,60,100); ctx.beginPath();
ctx.lineWidth=10; ctx.lineCap="round"; //线的结束线帽 ctx.moveTo(20,20); ctx.lineTo(20,200); ctx.stroke();
lineJoin --------- 设置或返回两条线相交时,所创建的拐角类型。
<script> var canvas = document.getElementById("Canvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.lineWidth =10; ctx.lineJoin="round"; ctx.moveTo(20,20); ctx.lineTo(100,50); ctx.lineTo(20,100); ctx.stroke(); </script>
miterLimit ---------设置或返回最大斜接长度
<script> var canvas = document.getElementById("Canvas"); var ctx = canvas.getContext("2d"); ctx.lineWidth=10; ctx.lineJoin="miter"; ctx.miterLimit=5; ctx.moveTo(20,20); ctx.lineTo(50,27); ctx.lineTo(20,34); ctx.stroke(); </script>
3.矩形
rect(x,y,width,height) ------- 创建矩形
<script> var canvas = document.getElementById("Canvas"); var ctx = canvas.getContext("2d"); ctx.rect(20,20,150,100); ctx.stroke(); </script>
fillRect(x,y,w,h) ------- 绘制"被填充"的矩形。
<script> var canvas = document.getElementById("Canvas"); var ctx = canvas.getContext("2d"); ctx.fillRect(0,0,100,100); </script>
strokeRect(x,y,w,h) --------- 绘制矩形(无填充)。
<script> var canvas = document.getElementById("Canvas"); var ctx = canvas.getContext("2d"); ctx.strokeRect(0,0,100,100) </script>
clearRect() ------- 在给定的矩形内清除指定的像素。
<script> var canvas = document.getElementById("Canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle="red"; ctx.fillRect(0,0,300,150); ctx.clearRect(20,20,100,50); </script>
4.路径
fill ------- 填充当前绘图(路径)。
<script> var canvas = document.getElementById("Canvas"); var ctx = canvas.getContext("2d"); ctx.rect(20,20,150,100); ctx.fillStyle="red"; ctx.fill(); //当前路径填充 </script>
stroke() -------- 绘制已定义的路径。
<script> var canvas = document.getElementById("Canvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(20,20); ctx.lineTo(20,100); ctx.lineTo(70,100); ctx.strokeStyle="red"; ctx.stroke(); </script>
beginPath() --------- 起始一条路径,或重置当前路径。
<script> var canvas = document.getElementById("Canvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.lineWidth="5"; ctx.strokeStyle="green"; // Green path ctx.moveTo(0,75); ctx.lineTo(250,75); ctx.stroke(); // Draw it ctx.beginPath(); ctx.strokeStyle="purple"; // Purple path ctx.moveTo(50,0); ctx.lineTo(150,130); ctx.stroke(); // Draw it </script>
moveTo() -------------- 把路径移动到画布中的指定点,不创建线条。
lineTo() -------------- 添加一个新点,然后在画布中创建从该点到最后指定点的线条。
<script> var canvas = document.getElementById("Canvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(300,150); ctx.stroke(); </script>
clothPath() --------- 创建从当前点回到起始点的路径
<script> var canvas = document.getElementById("Canvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(20,20); ctx.lineTo(20,100); ctx.lineTo(70,100); ctx.closePath(); ctx.stroke(); </script>
clip() ----- 从原始画布剪切任意形状和尺寸的区域。
<script> var canvas = document.getElementById("Canvas"); var ctx = canvas.getContext("2d"); // Clip a rectangular area ctx.rect(50,20,200,120); // ctx.stroke(); ctx.clip(); //用上面的框截取下面 // Draw red rectangle after clip() ctx.fillStyle="red"; ctx.fillRect(0,0,150,100); </script>
quadraticCurveTo() ---------- 创建二次贝塞尔曲线。
<script> var canvas = document.getElementById("Canvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(20,20); ctx.quadraticCurveTo(20,100,200,20); ctx.stroke(); </script>
bezierCurveTo() ---------- 创建三次贝塞尔曲线。
<script> var canvas = document.getElementById("Canvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(20,20); ctx.bezierCurveTo(20,100,200,100,200,20); //贝塞尔 ctx.stroke(); </script>
arc() --------- 创建弧/曲线(用于创建圆形或部分圆)。
<script> var canvas = document.getElementById("Canvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.arc(100,75,50,0,2*Math.PI); ctx.stroke(); </script>
arcTo() -------- 创建两切线之间的弧/曲线。
<script> var canvas = document.getElementById("Canvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(20,20); // 创建起始点 ctx.lineTo(100,20); // 创建水平线 ctx.arcTo(150,20,150,70,50); // 创建弧 ctx.lineTo(150,120); // 创建垂直线 ctx.stroke(); // 画出来 </script>
isPointlnPath() -------- 如果指定的点位于当前路径中,则返回 true,否则返回 false。
<script> var canvas = document.getElementById("Canvas"); var ctx = canvas.getContext("2d"); ctx.rect(20,20,150,100); if (ctx.isPointInPath(20,50)) //如果路径经过(20,50)为True { ctx.stroke(); //绘制 }; </script>
5.转换
scale(x,y) -------- 缩放当前绘图至更大或更小。 1--100% 0.5---50%
<script> var canvas = document.getElementById("Canvas"); var ctx = canvas.getContext("2d"); ctx.strokeRect(5,5,25,15); ctx.scale(2,2); ctx.strokeRect(5,5,25,15); </script>
rotate() -------- 旋转当前绘图。
<script> var canvas = document.getElementById("Canvas"); var ctx = canvas.getContext("2d"); ctx.rotate(20*Math.PI/180); ctx.fillRect(50,20,100,50); </script>
translate(x,y) -------- 替换绘图的当前转换矩阵。
<script> var canvas = document.getElementById("Canvas"); var ctx = canvas.getContext("2d"); ctx.fillRect(10,10,100,50); ctx.translate(70,70); ctx.fillRect(10,10,100,50); </script>
setTransform ------ 将当前转换重置为单位矩阵。然后运行 transform()。
<script> var canvas = document.getElementById("Canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle="yellow"; ctx.fillRect(0,0,250,100) ctx.setTransform(1,0.5,-0.5,1,30,10); ctx.fillStyle="red"; ctx.fillRect(0,0,250,100); ctx.setTransform(1,0.5,-0.5,1,30,10); ctx.fillStyle="blue"; ctx.fillRect(0,0,250,100); </script>
6.文本
7.图像绘制
8.像素操作
9.合成
10.其他
三.精美的Canvas案例
<script>var canvas = document.getElementById("Canvas");var ctx = canvas.getContext("2d");// Clip a rectangular areactx.rect(50,20,200,120);ctx.stroke();ctx.clip();// Draw red rectangle after clip()ctx.fillStyle="red";ctx.fillRect(0,0,150,100); </script>