var drawing=document.getElementById("drawing"); //确定浏览器支持<canvas>元素 if(drawing.getContext){ //取得绘图上下文对象的引用,“2d”是取得2D上下文对象 var context=drawing.getContext("2d"); var image=document.getElementById("image"); context.drawImage(image,10,10,20,20);//起点为(10,10),图像大小会变成20x20像素; }
(7)、阴影
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>canvas绘图</title> </head> <body> <canvas>A Drawing of something</canvas> <script> var drawing=document.getElementById("drawing"); //确定浏览器支持<canvas>元素 if(drawing.getContext){ //取得绘图上下文对象的引用,“2d”是取得2D上下文对象 var context=drawing.getContext("2d"); //设置阴影 context.shadowColor="rgba(0,0,0,0.5)"//设置阴影颜色 context.shadowOffsetX=5;//设置形状或路径x轴方向的阴影偏移量,默认值为0; context.shadowOffsetY=5;//设置形状或路径y轴方向的阴影偏移量,默认值为0; context.shadowBlur=4;//设置模糊的像素数,默认值为0,即不模糊。 //绘制红色矩形 context.fillStyle="red"; context.fillRect(10,10,50,50); //绘制半透明的蓝色矩形 context.fillStyle="rgba(0,0,255,1)"; context.fillRect(30,30,50,50); } </script> </body> </html>
(8)、渐变
渐变由CanvasGradient实例表示,很容易通过2D上下文来创建和修改。要创建一个新的先行渐变,可以调用createLinearGradient()方法。这个方法接收4个参数:起点的x坐标,起点的y坐标,终点的x坐标,终点的y坐标。创建渐变对象后,下一步就是使用addColorStop()方法来指定色标,这个方法接收两个参数:色标位置和css颜色值。色标位置是一个0(开始的颜色)到1(结束的颜色)之间的数据。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>canvas绘图</title> </head> <body> <canvas>A Drawing of something</canvas> <script> var drawing=document.getElementById("drawing"); //确定浏览器支持<canvas>元素 if(drawing.getContext){ //取得绘图上下文对象的引用,“2d”是取得2D上下文对象 var context=drawing.getContext("2d"); //设置渐变 var gradient=context.createLinearGradient(30,30,70,70); gradient.addColorStop(0,"white"); gradient.addColorStop(1,"black"); //绘制红色矩形 context.fillStyle="red"; context.fillRect(10,10,50,50); //绘制渐变矩形 context.fillStyle=gradient; context.fillRect(30,30,50,50); } </script> </body> </html>
为了确保渐变与形状对齐,有时候可以考虑使用函数来确保坐标合适,例如:
function createRectLinearGradient(context,x,y,width,height){ return context.createLinearGradient(x,y,x+width,y+height); }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>canvas绘图</title> </head> <body> <canvas>A Drawing of something</canvas> <script> var drawing=document.getElementById("drawing"); //确定浏览器支持<canvas>元素 if(drawing.getContext){ //取得绘图上下文对象的引用,“2d”是取得2D上下文对象 var context=drawing.getContext("2d"); //设置渐变 var gradient=createRectLinearGradient(context,30,30,50,50); gradient.addColorStop(0,"white"); gradient.addColorStop(1,"black"); //绘制红色矩形 context.fillStyle="red"; context.fillRect(10,10,50,50); //绘制渐变矩形 context.fillStyle=gradient; context.fillRect(30,30,50,50); } //确保渐变与形状对齐 function createRectLinearGradient(context,x,y,width,height){ return context.createLinearGradient(x,y,x+width,y+height); } </script> </body> </html>
要创建径向渐变(或放射渐变),可以使用createRadialGradient()方法,这个方法接收6个参数,对应着两个圆的圆心和半径,