intellij idea使用教程 wavedorm bam 存量客户 search ssh cmake uiviewcontroller openssl jwt angular ui router webkit progressjs vue框架 vue手册 后台ui模板 bootstrap管理系统模板 相亲网站源码 linux内存管理 jq选择第一个子元素 jq获取第一个子元素 mysql更新多个字段 移动端上传图片插件 matlab求矩阵最大值 plsql连接mysql 车载u盘 python输出函数 python3基础教程 java中scanner java集合框架 java多线程教程 java判断文件是否存在 javaabstract java文件输入输出 javalist转数组 php入门例子 xp画图工具 彻底删除mysql 华为交换机学习指南 PCCAD
当前位置: 首页 > 学习教程  > 编程语言

day01-canvas标签

2020/12/5 10:36:30 文章标签:

canvas标签 一:canvas标签的特点: ​ 1该标签是H5的新标签,IE8及以下的浏览器不支持该标签 ​ 2该标签只是图形的容器,必须通过脚本语言js来绘制图形 ​ 3该标签内的所有文本都会在不支持该标签的浏览器中显示 ​ 4应用场景&…

canvas标签

一:canvas标签的特点:

​ 1·该标签是H5的新标签,IE8及以下的浏览器不支持该标签

​ 2·该标签只是图形的容器,必须通过脚本语言js来绘制图形

​ 3·该标签内的所有文本都会在不支持该标签的浏览器中显示

​ 4·应用场景:游戏 / 可视化数据 / 多媒体 / banner广告

二:canvas标签的使用:

  1. 使用获取到该标签

  2. 调用getContext(‘2d’)方法返回一个对象,

    该对象提供了一些在画布进行2d绘图的属性和方法

    getContext(‘webgl’)进行立体绘图的属性与方法

  3. 根据文档选择合适的属性和方法来绘制图像

  4. 基本绘图命令:

    • 设置开始绘图的位置: context.moveTo( x, y ).
    • 设置直线到的位置: context.lineTo( x, y ).
    • 描边绘制: context.stroke().
    • 填充绘制: context.fill().
    • 闭合路径: context.closePath().
    • 开始路径: context.beginPath().

四:绘制矩形

  • fillstyle属性表示绘制图像的颜色

  • fillRect()绘制图像填充的矩形大小;

    参数:fillRect(x坐标值,y坐标值,绘制图像的width,会制图像的height)

<canvas id="canv"></canvas>
<script type="text/javascript">
    var canvas = document.getElementById("canv")
        var ctx = canvas.getContext('2d')
        ctx.fillStyle = '#FF0000';
        ctx.fillRect(100, 100, 400, 800);
    </script>

五:绘制线

  • moveTo()表示该线条开始的坐标

  • lineTo()表示该线条结束的坐标

  • stroke()是用来绘制线条的方法,即就是开始绘制

  • line.width设置线宽

  • line.Cap 设置线末端的类型

    ​ —butt(方形)

    ​ —round(圆角)

    ​ —square(突出圆角)

  • line.Join设置相交线的拐点

    ​ —bevel(平切)

    ​ —round(圆角)

    ​ —milter(直角)

 <canvas id="mycanvas">该标签的直线和圆</canvas>
    <script type="text/javascript">
        var canva = document.getElementById("mycanvas")
        var cte=canva.getContext('2d');
        cte.moveTo(0,0);
        cte.lineTo(200,300);
        cte.stroke()

六:绘制圆

  • beginPath()起始一条路径(着手开始绘图)

  • 1·参数:arc(圆中心的x坐标,中心的y坐标,半径,起始角度,结束角度,boolean值(false表示顺时;true表示逆时))

  • 2·画圆时候将起始角定义为0,结束角设置为 2*Math.PI

在这里插入图片描述


<canvas id="mycanvas">该标签的直线和圆</canvas>
    <script type="text/javascript">
        var canva = document.getElementById("mycanvas")
        var cte=canva.getContext('2d');
		// 起始一条路径(着手开始绘图)
    	cte.beginPath();
    	/* 2·画圆时候将起始角定义为0,结束角设置为 2*Math.PI。*/
    	cte.arc(100,75,50,0,2*Math.PI);
   		cte.stroke()
 </script>



七:==路径图==

```js
<canvas id="hello">该标签的路径</canvas>
 <script type="text/javascript">
var can=document.getElementById("hello");
    var tes=can.getContext("2d");
     tes.beginPath();
     //lineWidth属性表示路径的宽
     // strokeStyle属性表示路径的颜色
     tes.lineWidth="6"
     tes.strokeStyle="blue"
     tes.moveTo(0,80);
     tes.lineTo(255,80);
     tes.stroke();
    
     tes.beginPath();
     tes.strokeStyle="red"
     tes.moveTo(255,0);
     tes.lineTo(0,255);
     tes.stroke();
</script>

八:文本

  • font属性指定文本的大小和样式

  • 1·参数:strokeText(“文本” ,x轴坐标,y轴坐标)

    2·作用:定义文本内容 ,strokeText()是空心文本;fillText()是实心文本

      <canvas id="text"width="500" height="800">绘制文本失败</canvas>
        var txt=document.getElementById("text")
        var words=txt.getContext("2d");

        words.font="50px  '微软雅黑'";
        words.strokeText("你好!李银河",100,100)

九:渐变

  • 线条渐变步骤:

    1·创建线条

    • createLinearGradient()创建线条渐变
    • 参数:createLinearGradient(开始x坐标,开始y坐标,结束x坐标,结束y坐标)
    • 必须配合addColorStop()来设置渐变颜色的开始和结束

    2·填充

    <canvas id="line" width="200" height="100">绘制线条渐变失败</canvas>
     var ls=document.getElementById("line");
     var lin=ls.getContext("2d");
     
        //创建渐变线条
        var gre=lin.createLinearGradient(0,0,600,0);
        gre.addColorStop(0,"red");
        gre.addColorStop(1,"blue");

        //使用渐变效果填充
        lin.fillStyle=gre;
        lin.fillRect(10,10,150,80);
    
  • 径向渐变

    1·创建线条

    • createRadialGradient()创建径向渐变
    • 参数:createRadialGradient(开始x坐标,y,半径,结束x坐标,y,半径)创建径向渐变
    • 必须配合addColorStop()来设置渐变颜色和停止位置

    2·填充

     <canvas id="circle" width="200" height="100" style="border: 1px solid red;">绘制线条渐变失</canvas>
        	var lc=document.getElementById("circle");
            var cir=lc.getContext("2d");
         
            var gir=cir.createRadialGradient(75,50,5,90,60,100);
            gir.addColorStop(0,"blue");
            gir.addColorStop(1,"pink");
    
            //使用渐变效果填充
            cir.fillStyle=gir;
            cir.fillRect(10,10,150,80);
    

本文链接: http://www.dtmao.cc/news_show_450281.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?