canvas标签

来源：互联网发布：git ssh 指定端口编辑：程序博客网时间：2024/05/16 13:00

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body><center><canvas height="500" width="500" style="background:#9dffd7" id="canvas">    sorry!</canvas>    </center><script>    var Canvas=document.getElementById('canvas');    var cxt=canvas.getContext('2d');    //画圆    cxt.arc(40,40,30,0,360);    cxt.stroke();    cxt.closePath();    //画直线    cxt.beginPath();    cxt.moveTo(90,40);    cxt.lineTo(150,40);    cxt.stroke();    cxt.closePath();    //画矩形    cxt.beginPath();    cxt.rect(180,10,60,60);    cxt.stroke();    cxt.closePath();    cxt.fillStyle="rgb(255,0,0)";    cxt.fillRect(270,10,60,60);    cxt.beginPath();    cxt.strokeStyle="rgb(255,0,0)";    cxt.strokeRect(360,10,60,60);    cxt.closePath();    //设置文字    cxt.strokeStyle="green";    cxt.fillStyle="purple";    cxt.font="40px 黑体";    cxt.fillText("hello",10,110);    cxt.strokeText("hello",150,110);    cxt.fill();    //入图片导    var img=new Image();    img.src="banner.png";    cxt.drawImage(img,10,130,300,150);    //画三角形    cxt.beginPath();    cxt.lineWidth="4";    cxt.moveTo(360,130);    cxt.lineTo(400,200);    cxt.lineTo(330,200);    cxt.closePath();    cxt.stroke();    cxt.fill();    //旋转线    cxt.save();   //保存原图      cxt.translate(0,290);      cxt.rotate(10*Math.PI/180);      cxt.lineWidth="4";      cxt.beginPath();      cxt.moveTo(0,0);      cxt.lineTo(280,0);      cxt.stroke();      cxt.closePath();    cxt.restore();  //重新画旋转后的图    //旋转图片    cxt.save();   //保存原图    cxt.translate(10,130);    cxt.rotate(10*Math.PI/180);    var img=new Image();     //google不支持    img.src="banner.png";    cxt.drawImage(img,0,0,300,150);    cxt.restore();  //重新画旋转后的图    //设置渐变图    cxt.beginPath();    cxt.arc(60,400,40,0,360);    cxt.closePath();    var suncolor=cxt.createRadialGradient(60,400,0,60,400,40);    suncolor.addColorStop(0,"yellow");    suncolor.addColorStop(1,"red");    cxt.fillStyle=suncolor;    cxt.fill();    cxt.beginPath();    cxt.arc(150,400,40,0,360);    cxt.closePath();    var suncolor=cxt.createRadialGradient(165,400,10,150,400,30);    suncolor.addColorStop(0,"yellow");    suncolor.addColorStop(1,"red");    cxt.fillStyle=suncolor;    cxt.fill();</script></body></html>

//结果截图

0 0