您的位置：首页 > Web前端 > HTML5

h5的画布Canvas

2017-01-12 17:40 531 查看

绘制基本的图形[code]<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<title>canvas</title>

</head>

<body>

<h1>画布</h1>

<canvas id="myCanvas" style="border:1px solid #ff0" width="200" height="100" > Your Browser does not support Canvas, please upgrade</canvas>

<dl>

<dt><h1>绘制图形的步骤</h1></dt>

<dd>

<ol>

<li>第一步，创建一个带id的canvas元素</li>

<li>第二步，通过id获取canvas，document.getElementById(id)</li>

<li>第三步，创建Context对象，创造2D环境</li>

</ol>

<canvas id="myCanvas1" style="border:1px solid #ff0" width="200" height="100">

</canvas>

</dd>

</dl>

<dl>

<dt><h1>绘制直线</h1></dt>

<dd>

<ol>

<li>第一步，使用moveTo定起点</li>

<li>第二步，使用lineTo定终点</li>

<li>第三步，使用stroke花线</li>

</ol>

<canvas id="myCanvas2" style="border:1px solid #ff0" width="200" height="100">

您的浏览器不支持

</canvas>

</dd>

</dl>

<dl>

<dt><h1>绘制矩形</h1></dt>

<dd>

<ol>

<li>第一种方法，使用fill填充，用到的fillStyle和fillRect</li>

<li>第二种方法，使用stroke绘制轮廓，用到的strokeStyle和strokeRect</li>

</ol>

</dd>

<canvas id="myCanvas3" style="border:1px solid #ff0" width="200" height="100">

你的浏览器支持，请更新浏览器

</canvas>

</dl>

<dl>

<dt><h1>绘制圆形</h1></dt>

<dd>

<ol>

<li>用到了beginPath(),closePath(),arc(x,y,radius,startAngle,endAngle,是否按顺时针)，fill方法</li>

<li>fill是用来填充图形的；stroke是画轮廓</li>

</ol>

<canvas id="myCanvas4" style="border:1px solid #ff0">

</canvas>

</dd>

</dl>

<dl>

<dt><h1>绘制弧形</h1></dt>

<dd>

<ol>

<li>使用的方法就是arc(x,y,radius,startAngle,endAngle,是否按顺时针)</li>

</ol>

</dd>

<canvas id="myCanvas5" style="border:1px solid #ff0">Your Browser does not support Canvas, please upgrade</canvas>

</dl>

<dl>

<dt><h1>绘制三角形</h1></dt>

<dd>

<ol>

<li>fill是填充型；stroke是轮廓型;</li>

</ol>

<canvas id="myCanvas6" style="border:1px solid #ff0">

</canvas>

</dd>

</dl>

<dl>

<dt><h1>清空画布</h1></dt>

<dd>

<ol>

<li>使用clearRect(x,y,w,h)清空指定的画布</li>

</ol>

<canvas id="myCanvas7" style="border:1px solid #ff0">

可以清空的画布

</canvas>

<button type="button" onclick="clearMap()">清空上面的画布</button>

</dd>

</dl>

<script type="text/javascript">

// 绘制矩形

var c=document.getElementById("myCanvas1");

var context=c.getContext("2d");

context.fillStyle="#ff00ff";

context.fillRect(50, 25, 100, 50);

// 绘制直线

var c1=document.getElementById("myCanvas2");

var context1=c1.getContext("2d");

context1.moveTo(0, 0);

context1.lineTo(200,100);

context1.stroke();

// 绘制矩形--填充

var c2=document.getElementById("myCanvas3");

var context2=c2.getContext("2d");

context2.fillStyle="#ff00ff";

context2.fillRect(0, 0, 200, 100);

//绘制矩形-轮廓

context2.strokeStyle="#fff";

context2.strokeRect(0,0,100,50);

// 绘制圆形--填充

var c3=document.getElementById("myCanvas4");

var context3=c3.getContext("2d");

context3.fillStyle="#ff00ff";

context3.beginPath();

context3.arc(100, 75, 50, 0, Math.PI*2, true);

context3.closePath();

context3.fill();

// 绘制圆形--轮廓

context3.strokeStyle="#ff0";

context3.beginPath();

context3.arc(100, 75, 30,0,Math.PI*2, true);

context3.stroke();

// 绘制弧线

var c5=document.getElementById("myCanvas5");

var context5=c5.getContext("2d");

for (var i = 0; i<5; i++) {

context5.strokeStyle="#ff00ff";

context5.beginPath();

context5.arc(0, 150, i*10, 0, Math.PI*3/2, true);

context5.stroke();

// 绘制三角形--填充型

var c6 = document.getElementById("myCanvas6");

var context6=c6.getContext("2d");

context6.fillStyle="#ff00ff";

context6.beginPath();

context6.moveTo(25, 25);

context6.lineTo(150,25);

context6.lineTo(25,150);

context6.closePath();

context6.fill();

// 绘制三角形-轮廓型

context6.strokeStyle="#ff0";

context6.beginPath();

context6.moveTo(30, 30);

context6.lineTo(120,30);

context6.lineTo(30,120);

context6.closePath();

context6.stroke();

// 测试清空画布

var c7=document.getElementById("myCanvas7");

var context7=c7.getContext("2d");

context7.beginPath();

context7.arc(150, 150, 100, -Math.PI*1/6, -Math.PI*5/6, true);

context7.stroke();

// 清空画布

function clearMap(){

context7.clearRect(0,0,300,150);

</script>

</body>

</html>

[/code]

绘制贝塞尔曲线：

<dl>

<dt><h1>绘制二次贝塞尔曲线</h1></dt>

<dd>

<ol>

<li>quadraticCurveTo(cp1x,cp1y,x,y),cp1x,cp1y为控制点的坐标，x,y为终点坐标；</li>

</ol>

</dd>

<canvas id="myCanvas8" style="border:1px solid #ff0" width="300" height="200">

</canvas>

</dl>

<dl>

<dt><h1>绘制三次贝塞尔曲线</h1></dt>

<dd>

<ol>

<li>bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);cp1x,cp1y是第一个控制点的坐标；cp2x,cp2y是第二个坐标的控制点</li>

</ol>

<canvas id="myCanvas9" style="border:1px solid #ff0" width="300" height="200">

</canvas>

</dd>

</dl>

// 绘制贝塞尔曲线

var c8 = document.getElementById("myCanvas8");

var context8=c8.getContext("2d");

context8.strokeStyle="#ff00ff";

context8.beginPath();

context8.moveTo(0, 200);

context8.quadraticCurveTo(75, 50, 300, 200);

context8.stroke();

context8.globalCompositeOperation="source-over";

// 绘制三次贝塞尔曲线

var c9=document.getElementById("myCanvas9");

var context9=c9.getContext("2d");

context9.strokeStyle="#ff0";

context9.beginPath();

context9.moveTo(0, 200);

context9.bezierCurveTo(25,50,75,50,300,200);

context9.stroke();

context9.globalCompositeOperation="source-over";

[/code]

图形的变化---保存与恢复canvas状态

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<title>图形的变换</title>

</head>

<body>

<dl>

<dt><h1>保存与恢复Canvas状态</h1></dt>

<dd>

	<ol>

<li>save() :保存canvas的状态到堆中</li>

<li>restore:从堆中恢复canvas的状态</li>

	</ol>

<canvas id="myCanvas1" style="border: 1px solid #ff0;" width="300" height="200">

</canvas>

</dd>

</dl>

</body>

<script type="text/javascript">

// 保存和恢复canvas

var c1=document.getElementById("myCanvas1");

var context1=c1.getContext("2d");

// 绘制一个矩形

context1.fillStyle="#ff00ff";

context1.strokeStyle="red";

context1.fillRect(20, 20, 100, 100);

context1.strokeRect(20,20,100,100);

context1.fill();

context1.stroke();

// 保存当前的状态

context1.save();

// 绘制另外一个矩形

context1.fillStyle="#f00";

context1.strokeStyle="green";

context1.fillRect(140, 20, 100, 100);

context1.fillRect(140, 20, 100, 100);

context1.fill();

context1.stroke();

//恢复第一个矩形的状态

context1.restore();

//绘制两个矩形

context1.fillRect(20, 140, 50, 50);

context1.strokeRect(80,140,50,50);

</script>

</html>

[/code]

图形的变化---移动坐标空间

<dl>
<dt><h1>移动坐标空间</h1></dt>
<dd>
<ol>
<li>context.translate(dx,dy),dx和dy分变为水平和垂直的便宜量</li>
<li>注意：移动之前会先保存画布</li>
</ol>
</dd>
</dl>

<canvas id="myCanvas1" style="border:1px solid #ff0" width="300" height="200">

</canvas>

var ctx1=document.getElementById("myCanvas1").getContext("2d");

ctx1.translate(50,50);

ctx1.fillStyle="#ff0";

ctx1.fillRect(0, 0, 100, 100);

效果

[/code]

图形的变化--旋转坐标空间：

<dl>

<dt><h1>旋转坐标空间</h1></dt>

<dd>

<ol>

<li>方法是rotate(angle)</li>

<li>以原点为中心旋转，顺时针为正，选装的是canvas</li>

</ol>

<canvas id="myCanvas2" style="border:1px solid #ff0" width="700" height="300"></canvas>

</dd>

</dl>

// 旋转坐标空间

var ctx2=document.getElementById("myCanvas2").getContext("2d");

ctx2.save();

ctx2.rotate(Math.PI*1/4);

ctx2.fillStyle="#ff00ff";

ctx2.fillRect(0, 0, 100, 100);

ctx2.restore();

[/code]

图形的变化--缩放图形：

<dl>

<dt><h1>缩放图形</h1></dt>

<dd>

<ol>

<li>方法scale(x,y)</li>

<li>大于1的值是放大，小于1的值是缩小</li>

</ol>

<canvas id="myCanvas3" style="border:1px solid #ff0" width="700" height="300">

</canvas>

</dd>

</dl>

// 缩放图形

var ctx3=document.getElementById("myCanvas3").getContext("2d");

ctx3.save();

ctx3.fillStyle="#ff00ff";

ctx3.scale(1.9,1.1);

ctx3.fillRect(100, 100, 100, 100);

ctx3.restore();

结果：

[/code]

图形的变化--矩阵的变换：

可以实现平移，旋转，缩放，切变和镜像反射
方法：context.transform(m11x,m12y,m21x,m22y,dx,dy);写成矩阵是

矩阵变换后：x`=m11x+m21y+dx; y`=m12x+m22y+dy;
移动的矩阵：（1,0,0,1，dx,dy）; (0,1,1,0,dx,dy);
缩放的矩阵：（m11,0,0,m22,0,0）;(0,m12,m21,0,0,0);
旋转：（cos0,sin0,-sin0,cose0,0,0）;
将当前的矩阵变换为最初的矩阵：setTransform(m11,m12,m21,m22,dx,dy),会先重置再变换

图形的组合

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<title>图形的组合</title>

</head>

<body>

<dl>

<dt><h1>图形的组合</h1></dt>

<dd>

<ol>

<li>globalCompositeOperation，指定它的值，来改变图形的绘制顺序和绘制方式</li>

<li>globalAlpha,指定图形的透明度</li>

<li>次法放老图形和新图形的中间</li>

</ol>

</dd>

</dl>

<dl>

<dt><h1>source-over 默认值</h1></dt>

<dd>

<ol>

<li>新的图形覆盖在原图形上,默认值，source-over</li>

</ol>

<canvas id="myCanvas1" style="border: 1px solid #ff0;" height="200">

</canvas>

</dd>

<dt><h1>destination-over</h1></dt>

<dd>

<ol>

<li>原有的图形覆盖在新的图形之上</li>

</ol>

<canvas id="myCanvas2" style="border: 1px solid #ff0;" height="200">

</canvas>

</dd>

<dt><h1>source-atop</h1></dt>

<dd>

<ol>

<li>只是绘制原有的内容+重叠部分，且新在原上</li>

</ol>

<canvas id="myCanvas3" style="border: 1px solid #ff0;" height="200">

</canvas>

</dd>

<dt><h1>destination-atop</h1></dt>

<dd>

<ol>

<li>只是绘制原有的内容+重叠部分，且原在新的上面</li>

</ol>

<canvas id="myCanvas4" style="border: 1px solid #ff0;" height="200">

</canvas>

</dd>

<dt><h1>source-in</h1></dt>

<dd>

<ol>

<li>重叠部分,且新在上</li>

</ol>

<canvas id="myCanvas5" style="border: 1px solid #ff0;" height="200">

</canvas>

</dd>

<dt><h1>destination-in</h1></dt>

<dd>

<ol>

<li>重叠部分,且原在上</li>

</ol>

<canvas id="myCanvas6" style="border: 1px solid #ff0;" height="200">

</canvas>

</dd>

<dt><h1>source-out</h1></dt>

<dd>

<ol>

<li>新图形-重叠部分</li>

</ol>

<canvas id="myCanvas7" style="border: 1px solid #ff0;" height="200">

</canvas>

</dd>

<dt><h1>destination-out</h1></dt>

<dd>

<ol>

<li>原图形-重叠部分</li>

</ol>

<canvas id="myCanvas8" style="border: 1px solid #ff0;" height="200">

</canvas>

</dd>

<dt><h1>lighter</h1></dt>

<dd>

<ol>

<li>都显示，重叠部分加色处理</li>

</ol>

<canvas id="myCanvas9" style="border: 1px solid #ff0;" height="200">

</canvas>

</dd>

<dt><h1>darker</h1></dt>

<dd>

<ol>

<li>都显示，重叠部分减色处理</li>

</ol>

<canvas id="myCanvas10" style="border: 1px solid #ff0;" height="200">

</canvas>

</dd>

<dt><h1>copy</h1></dt>

<dd>

<ol>

<li>只保留新图形</li>

</ol>

<canvas id="myCanvas11" style="border: 1px solid #ff0;" height="200">

</canvas>

</dd>

<dt><h1>xor</h1></dt>

<dd>

<ol>

<li>重叠的部分变为透明</li>

</ol>

<canvas id="myCanvas12" style="border: 1px solid #ff0;" height="200">

</canvas>

</dd>

<dt><h1>globalAlpha</h1></dt>

<dd>

<ol>

<li>指定图像的透明度</li>

</ol>

<canvas id="myCanvas13" style="border: 1px solid #ff0;" height="200">

</canvas>

</dd>

</dl>

<script type="text/javascript">

// source-over 默认值

var ctx1=document.getElementById("myCanvas1").getContext("2d");

ctx1.fillStyle="red";

ctx1.fillRect(50, 50, 100, 100);

ctx1.globalCompositeOperation="source-over";

ctx1.fillStyle="blue";

ctx1.beginPath();

ctx1.arc(150, 125, 50, 0, Math.PI*2, true);

ctx1.closePath();

ctx1.fill();

// destination-over 原有的图形覆盖在新图形上

var ctx2=document.getElementById("myCanvas2").getContext("2d");

ctx2.fillStyle="red";

ctx2.fillRect(50, 50, 100, 100);

ctx2.globalCompositeOperation="destination-over";

ctx2.fillStyle="blue";

ctx2.beginPath();

ctx2.arc(150, 125, 50, 0, Math.PI*2, true);

ctx2.closePath();

ctx2.fill();

// source-atop

var ctx3=document.getElementById("myCanvas3").getContext("2d");

ctx3.fillStyle="red";

ctx3.fillRect(50, 50, 100, 100);

ctx3.globalCompositeOperation="source-atop";

ctx3.fillStyle="blue";

ctx3.beginPath();

ctx3.arc(150, 125, 50, 0, Math.PI*2, true);

ctx3.closePath();

ctx3.fill();

// destination-atop

var ctx4=document.getElementById("myCanvas4").getContext("2d");

ctx4.fillStyle="red";

ctx4.fillRect(50, 50, 100, 100);

ctx4.globalCompositeOperation="destination-atop";

ctx4.fillStyle="blue";

ctx4.beginPath();

ctx4.arc(150, 125, 50, 0, Math.PI*2, true);

ctx4.closePath();

ctx4.fill();

// source-in

var ctx5=document.getElementById("myCanvas5").getContext("2d");

ctx5.fillStyle="red";

ctx5.fillRect(50, 50, 100, 100);

ctx5.globalCompositeOperation="source-in";

ctx5.fillStyle="blue";

ctx5.beginPath();

ctx5.arc(150, 125, 50, 0, Math.PI*2, true);

ctx5.closePath();

ctx5.fill();

 // source-in

var ctx6=document.getElementById("myCanvas6").getContext("2d");

ctx6.fillStyle="red";

ctx6.fillRect(50, 50, 100, 100);

ctx6.globalCompositeOperation="destination-in";

ctx6.fillStyle="blue";

ctx6.beginPath();

ctx6.arc(150, 125, 50, 0, Math.PI*2, true);

ctx6.closePath();

ctx6.fill();

// source-out

var ctx7=document.getElementById("myCanvas7").getContext("2d");

ctx7.fillStyle="red";

ctx7.fillRect(50, 50, 100, 100);

ctx7.globalCompositeOperation="source-out";

ctx7.fillStyle="blue";

ctx7.beginPath();

ctx7.arc(150, 125, 50, 0, Math.PI*2, true);

ctx7.closePath();

ctx7.fill();

// destination-out

var ctx8=document.getElementById("myCanvas8").getContext("2d");

ctx8.fillStyle="red";

ctx8.fillRect(50, 50, 100, 100);

ctx8.globalCompositeOperation="destination-out";

ctx8.fillStyle="blue";

ctx8.beginPath();

ctx8.arc(150, 125, 50, 0, Math.PI*2, true);

ctx8.closePath();

ctx8.fill();

// lighter

var ctx9=document.getElementById("myCanvas9").getContext("2d");

ctx9.fillStyle="red";

ctx9.fillRect(50, 50, 100, 100);

ctx9.globalCompositeOperation="lighter";

ctx9.fillStyle="blue";

ctx9.beginPath();

ctx9.arc(150, 125, 50, 0, Math.PI*2, true);

ctx9.closePath();

ctx9.fill();

// darker

var ctx10=document.getElementById("myCanvas10").getContext("2d");

ctx10.fillStyle="red";

ctx10.fillRect(50, 50, 100, 100);

ctx10.globalCompositeOperation="darker";

ctx10.fillStyle="blue";

ctx10.beginPath();

ctx10.arc(150, 125, 50, 0, Math.PI*2, true);

ctx10.closePath();

ctx10.fill();

// copy

var ctx11=document.getElementById("myCanvas11").getContext("2d");

ctx11.fillStyle="red";

ctx11.fillRect(50, 50, 100, 100);

ctx11.globalCompositeOperation="copy";

ctx11.fillStyle="blue";

ctx11.beginPath();

ctx11.arc(150, 125, 50, 0, Math.PI*2, true);

ctx11.closePath();

ctx11.fill();

// xor

var ctx12=document.getElementById("myCanvas12").getContext("2d");

ctx12.fillStyle="red";

ctx12.fillRect(50, 50, 100, 100);

ctx12.globalCompositeOperation="xor";

ctx12.fillStyle="blue";

ctx12.beginPath();

ctx12.arc(150, 125, 50, 0, Math.PI*2, true);

ctx12.closePath();

ctx12.fill();

// globalAlpha

var ctx13=document.getElementById("myCanvas13").getContext("2d");

ctx13.fillStyle="red";

ctx13.fillRect(50, 50, 100, 100);

ctx13.globalAlpha="0.5";

ctx13.fillStyle="blue";

ctx13.beginPath();

ctx13.arc(150, 125, 50, 0, Math.PI*2, true);

ctx13.closePath();

ctx13.fill();

</script>

</body>

</html>

[/code]

图形的裁切

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<title>图形的裁切</title>

</head>

<body>

<dl>

<dt>

<h1>图形的裁切</h1>

</dt>

<dd>

<ol>

<li>clip</li>

<li>原理是给图形蒙一层蒙版，没有被蒙住的，会被隐藏</li>

<canvas id="myCanvas" style="border: 1px solid #ff0;" height="300">

</canvas>

</ol>

</dd>

</dl>

<script type="text/javascript">

var ctx=document.getElementById("myCanvas").getContext("2d");

ctx.fillStyle="black";

ctx.fillRect(0, 0, 300, 300);

ctx.fill();

// 绘制圆形

ctx.beginPath();

ctx.arc(150, 150, 100, 0 , Math.PI*2 , true);

// 裁切路径

ctx.clip();

ctx.fillStyle="red";

ctx.fillRect(50,50,150 , 150);

</script>

</body>

</html>

[/code]

线型的选择

lineWidth：设置线条的粗细，默认值为1；
lineCap:设置端点的样式，butt(平头)、round(圆头)、square(方头)；
lineJoin:设置连接处样式，round(圆头)、bevel(斜平面)、miter(直头)默认；
miterLimit:设置绘制交点的方式，给斜面长度设置一个上限，默认为10，当斜面长度超过线条宽度的10倍的时候，就会变成斜角。只是适用于miter。

绘制渐变

线性渐变：

方法：createLinearGradient(x1,y1,x2,y2), 其中（x1,y1）是起点，（x2,y2）是终点；
addColorStop(position,color):position是0~1的浮点；

径向渐变：

方法：createRadialGradient(x1,y1,r1,x2,y2,r2);

addColorStop(position,color),position的值是0~1

// 线性渐变

var ctx1=document.getElementById("myCanvas1").getContext("2d");

var lingrad=ctx1.createLinearGradient(0,0,0,200);

lingrad.addColorStop(1/7,'#ff0000');

lingrad.addColorStop(2/7,'#ff9900');

lingrad.addColorStop(3/7,'#00ff00');

lingrad.addColorStop(4/7,'#00ffff');

lingrad.addColorStop(5/7,'#0000ff');

lingrad.addColorStop(6/7,'#ff00ff');

lingrad.addColorStop(1,'#ff0000');

ctx1.fillStyle=lingrad;

ctx1.strokeStyle=lingrad;

ctx1.fillRect(10,10,200,200);

[/code]

绘制图案：

createPattern(img,type),type是类型，有repeat,repeat-x,repeat-y,no-repeat

注意：先有pattern对象，然后设置fillStyle
可以是img或者canvas

<dt><h1>绘制图案</h1></dt>

<dd>

<ol>

<li>createPattern(img,type),type是类型，有repeat,repeat-x,repeat-y,no-repeat</li>

<li>注意：先有pattern对象，然后设置fillStyle</li>

</ol>

<canvas id="myCanvas3" width="600" height="300" style="border: 1px solid #ff0;">

</canvas>

</dd>

//绘制图案

var ctx3=document.getElementById("myCanvas3").getContext("2d");

var img=new Image();

img.src="banner-ilvcrp.png";

img.onload=function(){

var ptrn=ctx3.createPattern(img,'repeat');

ctx3.fillStyle=ptrn;

ctx3.fillRect(0,0,600,300);

[/code]

创建阴影：

用到四个属性：

ctx.shadowOffsetX=float;
ctx.shadowOffsetY=float;
ctx.shadowBlur=flaot;
ctx.shadowColor=color;

<dt><h1>创阴影建</h1></dt>

  <dd>

  <ol>

<li>shadowOffsetX</li>

<li>shadowOffsetY</li>

<li>shadowBlur</li>

<li>shadowColor</li>

  </ol>

<canvas id="myCanvas4" width="600" height="300" style="border: 1px solid #ff0;">

  </canvas>

</dd>

//创建阴影

var ctx4=document.getElementById("myCanvas4").getContext("2d");

// 设置阴影

ctx4.shadowOffsetX=3;

ctx4.shadowOffset=3;

ctx4.shadowBlur=2;

ctx4.shadowColor="rgba(0,0,0,.5)";

// 绘制矩形

ctx4.fillStyle="#33ccff";

ctx4.fillRect(20, 20, 300, 60);

ctx4.fill();

[/code]

绘制文字：

填充文字：ctx.fillText(text,x,y,[maxW]),maxW是显示文字时候的最大的宽度，超过最大的宽度，字儿会变瘦；
绘制文字的轮廓：ctx.strokeText(text,x,y,[maxW])
文字的相关属性：

font:
textAlign：left/right/center/start/end
textBaseline:top/middle/bottom/

测量文字的宽度：measureText(text);

<dt><h1>绘制文字</h1></dt>

  <dd>

<canvas id="myCanvas5" width="350" height="200" style="border: 1px solid #ff0;">

  </canvas>

</dd>

// 绘制文字

var ctx5=document.getElementById("myCanvas5").getContext("2d");

ctx5.font="italic 35px 黑体";

ctx5.fillStyle="red";

ctx5.fillText("绘制填充文字",30,60,200);

ctx5.strokeStyle="blue";

ctx5.strokeText("绘制轮廓文字",30,120,200);

// 测量文字的宽度

var txt1="我是要测量宽度的文字";

ctx5.fillText(txt1,30,140);

var mtxt1=ctx5.measureText(txt1);

ctx5.fillText(mtxt1.width,160,80);

[/code]

操作和使用图像：

引入图像：ctx.drawImage(img,x,y);
改变图像大小：ctx.drawImage(img,x,y,w,h);
创建图像切片：ctx.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh)，

sx,sy:指得是被原图的被裁切区域的起始位置
sw,sh:指得是被裁切的宽度和高度
dx,dy:在画布上显示的位置
dw,wh:在画布上显示的宽和高

注意：为了实现图片预加载，先创建img，然后使用onload方法，最后指定url

// 引入图像

var ctx6=document.getElementById("myCanvas6").getContext("2d");

var img=new Image();

img.onload=function(){   //这样可以实现预加载

ctx6.drawImage(img,0,0);

};

img.src='banner-ilvcrp.png';

// 改变图像大小

var ctx7=document.getElementById("myCanvas7").getContext("2d");

var img=new Image();

img.onload=function(){   //这样可以实现预加载

ctx7.drawImage(img,0,0,300,100);

};

img.src='banner-ilvcrp.png';

// 创建图像切片

var ctx8=document.getElementById("myCanvas8").getContext("2d");

var img=new Image();

img.onload=function(){   //这样可以实现预加载

ctx8.drawImage(img,0,0,300,200,0,0,400,300);

};

img.src='banner-ilvcrp.png';

[/code]

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航