canvas教程

yzc577亚洲城老虎机注册(3)

字号+ 作者:H5之家 来源:H5之家 2016-12-31 18:01 我要评论( )

var drawing=document.getElementById("drawing"); //确定浏览器支持canvas元素 if(drawing.getContext){ //取得绘图上下文对象的引用,“2d”是取得2D上下文对象 var context=drawing.getContext("2d"); var image

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个参数,对应着两个圆的圆心和半径,
 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评