绘制由最后指定路径位置至指定位置的曲线。此时，使用控制点分别为(cp1x,cp1y),(cp2x,cp2y)的三元抛物线进行连接，并将位置(x,y)追加到路径中，具体示意图：（qq上对图片的修饰似乎还不够熟练。。。）
代码如下：
复制代码
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <style type="text/css">
6 canvas {
7 border-width: 5px;
8 border-style: dashed;
9 border-color: rgba(20, 126, 239, 0.50)
10 }
11 </style>
12
13 </head>
14 <body>
15 hello HTML5!
16 <canvas id="c1" width="300" height="300" ></canvas>
17 <script type="text/javascript">
18 var canvas=document.getElementById("c1");
19 var ctx=canvas.getContext("2d");
20
21 //使用颜色填充矩形
22 ctx.fillStyle="#f00ff0";
23 ctx.fillRect(0,0,300,300);
24 //描绘圆弧
25 //路径开始
26 ctx.beginPath();
27 ctx.moveTo(20,20);
28 ctx.bezierCurveTo(100,280,180,280,280,20);
29
30
31 //绘制处理
32 ctx.strokeStyle="#ff0000";
33 ctx.lineWidth=3;
34 ctx.stroke();
35 </script>
36 </body>
37 </html>
复制代码
4）绘制矩形的rect()方法
语法格式如下：context.rect(x,y,宽度,高度); x,y为矩形左上角坐标
除此之外，Canvas中还提供了三种特定的矩形绘制方法；
① context.strokeRect(x,y,w,h) 绘制矩形的轮廓
② context.fillRect(x,y,w,h) 填充矩形
③ context.clearRect(x,y,w,h) 清空矩形
这个比较好理解就不做效果演示及代码。
5.绘制渐变效果
线性渐变与圆形渐变
线性渐变就是从左至右（或自上而下）依次显示逐渐变化的颜色。而圆形渐变自圆心向外围逐渐显示变化的颜色。
1）线性渐变
指定线性渐变时使用createLinearGradient()方法，具体语法如下：
//先创建CanvasGradient对象： CanvasGradient=context.createLinearGradient(x1,y1,x2,y2); 表示由位置(x1,y1)至位置(x2,y2)显示渐变效果
//然后追加渐变颜色：CanvasGradient.addColorStop(颜色开始的相对位置,颜色); 指定渐变中使用的颜色,第一个参数（开始相对位置）中指定一个数字，从而决定什么位置使用什么颜色。
举个栗子：
代码为：
复制代码
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <style type="text/css">
6 canvas {
7 border-width: 5px;
8 border-style: dashed;
9 border-color: rgba(20, 126, 239, 0.50)
10 }
11 </style>
12
13 </head>
14 <body>
15 hello HTML5!
16 <canvas id="c1" width="300" height="300" ></canvas>
17 <script type="text/javascript">
18 var canvas=document.getElementById("c1");
19 var ctx=canvas.getContext("2d");
20
21 //绘图
22 var g=ctx.createLinearGradient(0,0,300,0);
23 g.addColorStop(0,"rgb(255,0,0)"); //开始位置设置为红色
24 g.addColorStop(1,"rgb(255,255,0)"); //黄色
25 ctx.fillStyle=g;
26 ctx.fillRect(20,20,260,260);
27 </script>
28 </body>
29 </html>
复制代码
2）圆形渐变
绘制圆形渐变时，使用createRadialGradient()方法创建对象，同样使用addColorStop()方法追加渐变颜色。具体语法如下
//创建CanvasGradient对象 CanvasGradient=context.createRadialGradient(x1,y1,r1,x2,y2,r2); 通过参数指定以(x1,y1)为圆心，半径为r1的圆到以(x2,y2)为圆心，半径为r2的圆的渐变效果
// 追加渐变颜色 CanvasGradient.addColorStop(颜色开始的相对位置,颜色);
举个栗子
代码为：
复制代码
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <style type="text/css">
6 canvas {
7 border-width: 5px;
8 border-style: dashed;
9 border-color: rgba(20, 126, 239, 0.50)
10 }
11 </style>
12
13 </head>
14 <body>
15 hello HTML5!
16 <canvas id="c1" width="300" height="300" ></canvas>
17 <script type="text/javascript">
18 var canvas=document.getElementById("c1");
19 var ctx=canvas.getContext("2d");
20
21 //绘图
22 var g=ctx.createRadialGradient(150,150,50,150,150,100);
23 g.addColorStop(0.3,"red"); //开始位置设置为红色
24 g.addColorStop(0.7,"yellow");
25 g.addColorStop(1.0,"blue"); //黄色
26 ctx.fillStyle=g;
27 ctx.fillRect(20,20,260,260);
28 </script>
29 </body>
30 </html>
复制代码
6.绘制图像
Canvas 中的图像绘制
图像绘制的基本步骤如下：
1）读取图像文件
2）在Canvas中进行绘制
图像读取前，首先创建Image对象，在Image对象的src属性中指定图像文件所在路径后就可以读取了。读取结束后，触发onload事件，基本语法如下：
var image=new Image();
image.src="图像文件路径";
image.onload=function(){//图像读取时的处理}
使用Canvas上下文中的drawImage()方法将读取后的Image对象绘制在Canvas上，实际上是将Image对象中的图像数据输出到Canvas中。有三种drawImage()方法用于图像的绘制
①直接绘制 context.drawImage(image,dx,dy)
②尺寸修改(resize) context.drawImage(image,dx,dy,dw,dh)
③图像截取 context.drawImage()
相关文章
精彩导读
热门资讯
关注我们
