HTML5 - canvas标签

来源：互联网发布：星海牌萨克斯淘宝网编辑：程序博客网时间：2024/06/06 01:01
canvas标签

<!doctype html><html lang="zh-CN">    <head>        <meta charset="utf-8" />        <title>canvas标签</title>    <head>    <body>        <!-- canvas的宽和高建议直接使用width、height属性设置，同时不要指定单位px -->        <canvas id="canvas" width="500" height="800" style="background:#ccc;">            您的浏览器不支持canvas标签，请升级浏览器！        </canvas>        <script>            //获取画布对象            var canvas=document.getElementById("canvas");            //alert(canvas);            //获取用于绘画的上下文环境            var cxt=canvas.getContext("2d");            //alert(cxt);            //画一条线段            cxt.beginPath();//开启一个新路径            cxt.lineWidth=10;//设置画笔的宽度            cxt.strokeStyle="red";//设置画笔的颜色            cxt.moveTo(20,20);//设置笔触的位置,即起始点            cxt.lineTo(100,20);//设置终点的位置            cxt.stroke();//画线            cxt.closePath();//关闭路径            //画一个圆形，空心圆            cxt.beginPath();            cxt.lineWidth=3;            cxt.strokeStyle="yellow";            cxt.arc(200,200,50,0,360,false); //200,200表示圆心位置，50表示半径，0,360表示角度范围，false表示逆时针，true顺时针            cxt.stroke();            cxt.closePath();            //画一个实心圆            cxt.beginPath();            cxt.fillStyle="pink";            cxt.arc(400,200,50,0,360,false);            cxt.fill();//画实心圆            cxt.stroke();//画空心圆            cxt.closePath();            //画一个矩形，空心矩形            cxt.beginPath();             /*cxt.rect(200,300,100,50);//200,300表示起始点，100,50表示长和宽            cxt.stroke(); */            cxt.strokeRect(200,300,100,100);//建议使用此方式            cxt.closePath();            //画一个实心矩形            cxt.beginPath();            /*cxt.rect(350,300,50,100);            cxt.fill();*/            cxt.fillRect(350,300,50,200); //建议使用此方式            cxt.closePath();            //将一段文字写到画布中            cxt.font="30px 黑体";//设置css font属性            cxt.fillStyle="red";            cxt.fillText("欢迎来到南京网博！",20,500);            cxt.lineWidth=1;            // 创建渐变            var gradient=cxt.createLinearGradient(0,0,canvas.width,0);            gradient.addColorStop("0","magenta");            gradient.addColorStop("0.5","blue");            gradient.addColorStop("1.0","red");            // 用渐变填色            cxt.strokeStyle=gradient;            cxt.strokeText("welcome to itany!",20,550);            //画一个三角形            cxt.beginPath();            cxt.moveTo(300,500);            cxt.lineTo(300,600);            cxt.lineTo(400,500);            cxt.closePath(); //需要先关闭路径再画            cxt.stroke();               cxt.fill();            //将一幅图片添加到画布中            var img=new Image();            img.src="dog.jpg";            cxt.drawImage(img,100,400);        </script>    </body></html>
0 0