canvas使用1

画直线:

?

1 2 3 4 5 6 7 8 9 10 11

var c = document.getElementById("myCanvas"); //不要忘写document var ctx = c.getContext("2d");   ctx.lineWidth = 10; ctx.strokeStyle = "red"; // 注意不是strokeColor;   //创建一个路径 ctx.beginPath(); ctx.moveTo(10,10); ctx.lineTo(50,50); ctx.stroke();

添加线帽：ctx.lineCap = “butt”(默认) ；”round”（半圆形）； ”square”（正方形）;　　

?

1 2 3 4 5 6 7 8 9 10 11 12 13

//额外补充，加深 begbinPath 与stroke 的区域理解 ctx.beginPath(); ctx.moveTo(100,100); ctx.lineTo(200,100); ctx.strokeStyle = "red"; ctx.stroke(); //(1) ctx.beginPath(); //(2) ctx.moveTo(100,200); ctx.lineTo(200,200); ctx.strokeStyle = "blue"; ctx.stroke(); （3) //代码绘制一蓝一红两条线；省略 (1)或(3) 都只能绘制其中一条；省略 (2)会得到 一紫一蓝；省略 (1)和(2) 会得到两条蓝色

画矩形:

?

1 2 3 4 5 6 7 8 9 10

ctx.lineWidth = 10; ctx.strokeStyle = "yellow"; //实心矩形：ctx.fillStyle = “yellow”; ctx.beginPath(); //用 strokeRect 函数来绘制一个空心矩形；四个参数分别为起点坐标（左上角） X、 Y，矩形长宽。 ctx.strokeRect(10,10,100,100); //实心矩形：ctx.fillRect(10.10.100.100); /*strokeRect 函数替代方法。 //实心矩形： * ctx.rect(10,10,100,100); //ctx.rect(10,10,100,100); * ctx.stroke(); //ctx.fill(); */

画圆弧:

?

1 2 3 4 5 6

ctx.beginPath(); //用 arc 函数绘制圆弧，六个参数分别为圆心坐标 X、Y ，半径，起始角度（a）， 终止角度（ b），是否逆时针（圆弧方向 c） ctx.arc(100,100,70,0,1/2*Math.PI,true); //可通过 fill 函数绘制实心圆弧 ctx.stroke();

//起始角度与终止角度都是根据圆心向右水平线确定的，它们分别确定圆弧开始点与结束点；再确定圆弧方向绘制。

fill 画圆弧的变化情况:

　

画圆角矩形:

?

1 2 3 4 5 6 7

ctx.beginPath(); ctx.moveTo(20,20); ctx.lineTo(70,20); //用 arcTo 函数来绘制圆弧，五个参数分别是 p1 坐标，p2 坐标，圆弧半径。 ctx.arcTo(120,30,120,70,50); ctx.lineTo(120,120); ctx.stroke();

P1 点X 坐标与P2 点 X 坐标相同；P1 点Y 坐标相比 P2 点 Y 坐标更接近起始点 Y 坐标

檫除 canvas 画板:

?

1 2 3 4

//用 clearRect 函数擦除一个矩形区域，四个参数分别是起点 X、Y 坐标，矩形长宽。 ctx.clearRect(30,30,50,50); //无需在 ctx.beginPath()中；无需使用 ctx.stroke() //擦除画板，对设置之前绘制的图形有效，对之后的无效。

画曲线:

• 二次贝尔塞尔曲线:
  ?

  1 2 3 4 5 6

  ctx.beginPath(); ctx.moveTo(100,100); //用 quadraticCurveTo 函数，四个参数分别是控制点（ a）X 、Y 坐标，终点（ b） X、 Y 坐标。 ctx.quadraticCurveTo(20,50,200,20) ctx.stroke();

• 三次贝尔塞尔曲线:
  ?

  1 2 3 4 5 6

  ctx.beginPath(); ctx.moveTo(68,130); //用 berzierCurveTo 函数，六个参数分别是控制点（ a）X 、Y 坐标，控制点（ b） X、 Y 坐标，终点（ c）X 、Y 坐标。 ctx.bezierCurveTo(20,10,268,10,268,170); ctx.stroke();

利用 clip 在指定区域绘图:

?

1 2 3 4 5 6 7 8

//绘制个圆 ctx.arc(100,100,40,0,2*Math.PI,true); //目前已知只能用 arc、rect 设置区域 //用 clip 函数将这个圆作为绘制操作的区域，之后画出的图形只能显示在这个区 域内。也可使用 ctx.rect()绘制矩形区域。 ctx.clip(); //对在这之前绘制的图像无效 ctx.beginPath(); ctx.fillStyle = "lightblue"; ctx.fillRect(0,0,300,300);//绘制出来的矩形只能看到其在圆内的部分

　　

绘制自定义图形:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

根据上面的图形进行组合，如：直线加三次贝塞尔曲线 //绘制直线部分 ctx.beginPath(); ctx.lineWidth = 5;   ctx.strokeStyle = "red"; ctx.moveTo(100,150); ctx.lineTo(150,50); ctx.lineTo(200,150); ctx.lineTo(150,250); ctx.lineTo(100,150) ctx.stroke(); //绘制三次贝尔塞尔曲线部分 ctx.beginPath(); ctx.moveTo(100,150); ctx.bezierCurveTo(50,100,100,0,150,50); ctx.bezierCurveTo(200,0,250,100,200,150); ctx.bezierCurveTo(250,200,200,300,150,250); ctx.bezierCurveTo(100,300,50,200,100,150); ctx.stroke();

　　

//可以根据对称性，设置特定的长度确定三次贝塞尔曲线的控制点，如上面例子中设置50.

//使用 beginPath()表示开始一段新的绘制，相当于局部函数区域，里面有的变量设置会覆盖外面的设置。

//综合绘制填充图片时，注意覆盖顺序。

绘制文本:

• 绘制文字:
  ?

  1 2 3 4 5 6

  //设置文字大小与字体 ctx.font = "30px Arial"; //使用函数 fillText 绘制文本，四个参数分别为文本字符串，默认点 a 的X 坐标， Y 坐标，文本最大宽度（可省略，在最大范围内为本身的宽度，超过范围则压缩。） ctx.fillText("Hello World",100,50); //可以用 fillStyle 设置字体颜色为单色或是设置好 的颜色渐变 ;注意fillText 不能像fillRect 那样拆分成 fill 与rect 执行。

  　

  ?

  1 2	//使用函数 strokefill 绘制文本 ctx.strokeText("Hello World",100,50);

  　　

• 粗体效果:
  ?

  1 2 3 4

  //使用 font-weight 值:normal(正常)， bold(粗体)，bolder(更粗 )，lighter( 更细)。 ctx.font = “normal 30px Arial”; //或者使用数字 ctx.font = “100 30px Arial”; / /目前已知只有 100、600 、900

• 斜体效果:

  ?

  1	ctx.font = “italic 30px Arial”;