HTML-Canvas01

浏览数：24 / 时间：2015年06月09日

画直线:

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”（正方形）;　　

//额外补充，加深 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) 会得到两条蓝色

画矩形:

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

画圆弧:

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

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

fill 画圆弧的变化情况:

　技术分享

画圆角矩形:

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 画板:

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

画曲线:

二次贝尔塞尔曲线:

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

技术分享

三次贝尔塞尔曲线:

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 在指定区域绘图:

//绘制个圆
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);//绘制出来的矩形只能看到其在圆内的部分

　　技术分享

绘制自定义图形:

根据上面的图形进行组合，如：直线加三次贝塞尔曲线
//绘制直线部分
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()表示开始一段新的绘制，相当于局部函数区域，里面有的变量设置会覆盖外面的设置。

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

技术分享

绘制文本:

绘制文字:

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

　技术分享

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

　　技术分享

粗体效果:

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