首页 / HTML / HTML5 - canvas标签

HTML5 - canvas标签

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了HTML5 - canvas标签，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2172字，纯文字阅读大概需要4分钟。

内容图文

canvas标签

            
                <!doctype html>
                <htmllang="zh-CN">
                <head>
                <metacharset="utf-8" />
                <title>canvas标签</title><head><body><!-- canvas的宽和高建议直接使用width、height属性设置，同时不要指定单位px --><canvasid="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>

原文：http://blog.csdn.net/wangzi11322/article/details/45305893

内容总结

以上是互联网集市为您收集整理的HTML5 - canvas标签全部内容，希望文章能够帮你解决HTML5 - canvas标签所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1312213.html

来源：【匿名】