HTML5之CANVAS 属性和方法的示例汇总

来源：互联网发布：js取radio选中的值编辑：程序博客网时间：2024/06/07 02:02
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><script>window.onload=function(){/**/ /////矩形////////////////////////////////  var c=document.getElementById("myRect");  var cxt=c.getContext("2d");  cxt.fillStyle="#FF0000"; //方法填充一个矩形。 ////X,Y,width,height  //矩形的左上角的坐标;矩形的大小。cxt.fillRect(0,0,150,75);  /////////end////////////////////////////      ////////线段///////////////////////////  var c=document.getElementById("myLine");  var cxt=c.getContext("2d");  ////X,Y  cxt.moveTo(10,10);  cxt.lineTo(150,50);  cxt.lineTo(10,50);  cxt.lineTo(10,10);  cxt.stroke();  /////end///////////////////////////////  //////两条线段/////////////////////////////////var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");////方法开始一条路径，或重置当前的路径。ctx.beginPath();//属性设置或返回当前线条的宽度，以像素计。ctx.lineWidth="5";//属性设置或返回用于笔触的颜色、渐变或模式。(来填充颜色)ctx.strokeStyle="red"; // 红色路径//x,y//路径的目标位置的x坐标;路径的目标位置的y坐标ctx.moveTo(0,75);//方法添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）。ctx.lineTo(250,75);//方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。ctx.stroke(); // 进行绘制ctx.beginPath();ctx.strokeStyle="blue"; // 蓝色路径ctx.moveTo(50,0);ctx.lineTo(150,130);ctx.stroke(); // 进行绘制/////end/////////////////////////////////////  ///////用渐变进行填充////////////////////////////////////  var c=document.getElementById("myCanvas2");var ctx=c.getContext("2d");// 方法创建线性的渐变对象。//x0,y0,x1,y1//渐变开始点的 x 坐标;渐变开始点的 y 坐标;渐变结束点的 x 坐标;渐变结束点的 y 坐标var gradient=ctx.createLinearGradient(0,0,170,0);//开始颜色 gradient.addColorStop("0","magenta");gradient.addColorStop("0.5","blue");gradient.addColorStop("1.0","red");// 用渐变进行填充ctx.strokeStyle=gradient;ctx.lineWidth=5;//方法绘制矩形（不填色）。笔触的默认颜色是黑色。//x,y,width,height//矩形左上角的x坐标;矩形左上角的y坐标;矩形的宽度，以像素计;矩形的高度，以像素计ctx.strokeRect(20,20,150,100); /////end////////////////////////////////////  ////圆形///////////////////////////////  var c=document.getElementById("myArc");  var cxt=c.getContext("2d"); // 属性设置或返回用于填充绘画的颜色、渐变或模式。 cxt.fillStyle="#ccc";  //方法开始一条路径，或重置当前的路径。cxt.beginPath();  //方法创建弧/曲线（用于创建圆或部分圆）。////圆心横坐标、纵坐标、半径//圆的中心的x坐标;圆的中心的y坐标;圆的半径;起始角，以弧度计。（弧的圆形的三点钟位置是0度）;结束角，以弧度计;可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。  cxt.arc(100,100,100,200,Math.PI*2,true);  //方法创建从当前点到开始点的路径。cxt.closePath(); //方法填充当前的图像（路径）。默认颜色是黑色。//如果路径未关闭，那么 fill() 方法会从路径结束点到开始点之间添加一条线，以关闭该路径，然后填充该路径。 cxt.fill();  /////end///////////////////////////////       ////渐变////////////////////////////////  var c=document.getElementById("myColor");  var cxt=c.getContext("2d");  // 方法创建线性的渐变对象。//x0,y0,x1,y1//渐变开始点的 x 坐标;渐变开始点的 y 坐标;渐变结束点的 x 坐标;渐变结束点的 y 坐标var grd=cxt.createLinearGradient(0,0,175,50);  /////开始颜色 grd.addColorStop(0,"#FF0000");  /////末端颜色  grd.addColorStop(1,"#00FF00");  // 属性设置或返回用于填充绘画的颜色、渐变或模式。  cxt.fillStyle=grd; //绘制“已填色”的矩形。默认的填充颜色是黑色。//矩形左上角的 x 坐标;矩形左上角的 y 坐标;矩形的宽度，以像素计;矩形的高度，以像素计 /////x,y,width,height  cxt.fillRect(10,10,200,100);  ////end//////////////////////////////////    /////图片/////////////////////////////  var c=document.getElementById("myImage");  var cxt=c.getContext("2d");  var img=new Image();  ////图片路径  img.src="1.jpg";img.onload=function(){  ////绘制原始图像，（0,0）表示图像的左上角位与canvas画布的位置、定义图片的横、纵坐标  cxt.drawImage(img,0,0);  }/////end//////////////////////////////  }</script></head><body>    <canvas id="myRect" width="200" height="100">你的浏览器不支持canvas绘画！</canvas>             <canvas id="myLine" width="200" height="100">你的浏览器不支持canvas绘画！</canvas>            <canvas id="myCanvas" height="300" width="200">你的浏览器不支持canvas绘画！</canvas>          <canvas id="myCanvas2" height="300" width="200">你的浏览器不支持canvas绘画！</canvas>           <canvas id="myArc" height="300" width="200">你的浏览器不支持canvas绘画！</canvas>            <canvas id="myColor" height="200" width="100">你的浏览器不支持canvas绘画！</canvas>            <canvas id="myImage" height="597" width="437">你的浏览器不支持canvas绘画！</canvas>      </body></html>
效果图如下：