在Canvas中绘制了一个蓝色边框和绿色填充的矩形

作者: mgm娱乐网址  发布:2020-01-10

我们可以在HTML5 canvas上绘制绘制文字,并且可以设置文字的字体,大小和颜色。

不论你在HTML5 canvas上绘制什么图形,有两个属性是你必须设置的:

神奇且强大的canvas

绘制文字的字体由2D上下文的font属性来控制。如果你需要使用颜色来填充文字或制作描边文字,可以使用2D上下文的fillStylestrokeStyle属性来完成。

描边属性-stroke

一.Canvas的基本介绍

1.什么是Canvas

定义:是HTML5提供的一种新标签, ie9才开始支持的,Canvas是一个矩形区域的画布,可以用JS控制每一个像素在上面绘画。canvas 标签使用 JavaScript 在网页上绘制图像,本身不具备绘图功能。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

2.Canvas主要应用的领域

1 可视化数据: 各类统计图表,比如:百度的echart

2 场景秀: 用Canvas实现动态的广告效果能够非常融洽的跨平台运行。如:手机中微产品.在移动端兼容性很好

3 游戏: canvas在基于Web的图像显示方面比Flash更加立体、更加精巧,canvas成为HTML5小游戏开发首选。现阶段h5做游戏,营业方式不是很明确. 25 超棒的 HTML5 Canvas 游戏

4 其他可嵌入网站的内容 (多用于活动页面、特效):类似图表、音频、视频,还有许多元素能够更好地与Web融合,并且不需要任何插件。

5 趋势=> 模拟器: 无论从视觉效果还是核心功能方面来说,模拟器产品可以完全由JavaScript来实现。模拟真实硬件环境,如移动端各种类型手机.

6 趋势=> 远程计算机控制: Canvas可以让开发者更好地实现基于Web的数据传输,构建一个完美的可视化控制界面。

7 趋势=> 图形编辑器: Photoshop图形编辑器将能够100%基于Web实现。

8 版本支持

最新标准:http://www.w3.org/TR/2dcontext/

稳定版本的标准:http://www.w3.org/TR/2013/CR-2dcontext-20130806/

3.Canvas绘制线条

01Canvas标签语法和属性

  • canvas:画布油布的意思 英 ['kænvəs] 美 ['kænvəs]
  • 标签名:canvas,双标签,需要闭合。
  • 单位: px,可以设置width和height属性,否则忽略单位。
  • width和hegiht:默认300*150像素

注意:

  • 不要用CSS控制它的宽和高,会导致内部图片被拉伸,
  • 重新设置canvas标签的宽高属性会让画布擦除所有的内容
  • 可以给canvas画布设置背景色

02 浏览器不兼容处理

  • ie9以上才支持canvas, 其他chrome、Safari、Opera等都支持

  • 只要浏览器兼容canvas,那么就会支持绝大部分api(个别最新api除外)

  • 移动设备几乎支持Canvas的所有API

  • 2d的支持的都非常好,3d(webgl)ie11才支持,其他都支持

  • 如果浏览器不兼容,最好进行友好提示

      eg:
      <canvas id="canvas">
      你的浏览器不支持canvas,请升级浏览器.浏览器不支持,显示此行文本
      </canvas>
    
  • 如果浏览器不兼容,可以使用flash等方式进行替换。

4.Canvas绘图上下文context

01 Context:Canvas的上下文、绘制环境。

  • 上下文:是所有的绘制操作api的入口或者集合。

  • Canvas自身无法绘制任何内容,Canvas的绘图是使用JS调用Canvas的接口来完成的。

  • Context对象就是JavaScript操作Canvas的接口。

  • 使用[CanvasElement].getContext(‘2d’)来获取2D绘图上下文

      eg:
      //获得画布
      var canvas  = document.getElementById( 'cavsElem' );
      //注意:2d小写,二维, 3d:webgl
      var ctx = canvas.getContext( '2d' );
    

5.基本的绘制路径

5.1Canvas绘制的基本说明

  1. canvas坐标系,从最左上角0,0开始。x向右增大, y向下增大
  2. 绘制起点:ctx.moveTo(x, y); //x,y 都是相对于 canvas盒子的最左上角。
  3. 绘制终点:ctx.lineTo(x, y); //从x,y的位置绘制一条直线到起点或者上一个线头点。
  4. 开始路径:ctx.beginPath();作用:将当路径和之前路径隔离,方便你对当前路径进行设置样式,线宽.
  5. 闭合路径:ctx.closePath();作用:闭合路径会自动把最后的线头和开始的线头连在一起。
  6. 描边:ctx.stroke();

5.2Canvas绘制的基本步骤:

  • 第一步:获得上下文 =>canvasElem.getContext('2d');

  • 第二步:开始路径规划 =>ctx.beginPath()

  • 第三步:移动起始点 =>ctx.moveTo(x, y)

  • 第四步:绘制(点、线、面、图片...) =>ctx.lineTo(x, y)

  • 第五步:闭合路径 =>ctx.closePath();

  • 第六步:绘制描边 =>ctx.stroke();

      eg:
      <body>
      <canvas id="canvas" width="900" height="600" style="border: 1px solid #000;">你的浏览器不支持canvas,请升级浏览器.浏览器不支持,显示此行文本</canvas>
    
      <script>
          //1.获取canvas
          var canvas = document.getElementById('canvas');
          //2.获取上下文
          var ctx = canvas.getContext('2d');
    
          //3.绘制一条直线
          //起点
          ctx.moveTo(100,100);
          //终点
          ctx.lineTo(300,100);
          //注意:以上只是对当前路径进行描述,表示的是路径的状态,并没有进行绘制操作
    
          //线宽
          ctx.lineWidth = 10;
          //颜色
          ctx.strokeStyle = 'red';
    
          //绘制 描边
          ctx.stroke();
    
          //4.绘制第二条线
          //开启路径.作用:将当路径和之前路径隔离,方便你对当前路径进行设置样式,线宽.
          ctx.beginPath();
          ctx.moveTo(200,50);
          ctx.lineTo(200,250);
    
          //5.绘制第三条线段
          ctx.lineTo(300,300);
    
          //闭合路径:  作用:将开始的线头和结束的线头连接
          ctx.closePath();
    
          ctx.strokeStyle = 'green';
          ctx.lineWidth = 5;
    
          //描边
          ctx.stroke();
    
      </script>
    

要在canvas上绘制文字,可以通过2D上下文的fillText()函数或strokeText()函数来完成。下面是一个简单的例子:

填充属性和描边属性决定如何来绘制图形。stroke是图形的外轮廓边框。fill则是图形的填充颜色。

二.Canvas绘制的基本应用

2.1 Canvas绘制表格-背景

eg:
<script>
    //1.获取canvas和上下文
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    //2.设置常量
    var marginWH = 10;//表示每一个格子之间的空格距离
    //计算行和列
    var row = canvas.height / marginWH;
    var col = canvas.width / marginWH;
    /*
    * 绘制背景网格
    * */
    //3.绘制横线
    for(var i = 0;i<row;i++){
        ctx.moveTo(0,i * marginWH);
        ctx.lineTo(canvas.width,i * marginWH);
    };
    //绘制竖线
    for(var i = 0;i<col;i++){
        ctx.moveTo(i * marginWH,0);
        ctx.lineTo(i * marginWH,canvas.height);
    };
    //设置颜色
    ctx.strokeStyle = 'red';
    //设置线宽
    ctx.lineWidth = 0.5;
    //4.绘制 描边
    ctx.stroke();

</script>

2.2 Canvas绘制表格完成

eg:
<script>
    //1.获取canvas和上下文
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    //2.设置常量
    var marginWH = 10;
    //计算行和列
    var row = canvas.height / marginWH;
    var col = canvas.width / marginWH;
    /*
    * 绘制背景网格
    * */
    //3.绘制横线
    for(var i = 0;i<row;i++){
        ctx.moveTo(0,i * marginWH);
        ctx.lineTo(canvas.width,i * marginWH);
    };
    //绘制竖线
    for(var i = 0;i<col;i++){
        ctx.moveTo(i * marginWH,0);
        ctx.lineTo(i * marginWH,canvas.height);
    };
    //设置颜色
    ctx.strokeStyle = 'red';
    //设置线宽
    ctx.lineWidth = 0.5;
    //4.绘制 描边
    ctx.stroke();

    //5.绘制坐标轴
    //常量
    var x0 = 100, y0 = 500;//坐标原点
    var maxWidth = 500, maxHeight = 400;//坐标轴的长度
    //5.1横轴
    ctx.beginPath();
    ctx.moveTo(x0,y0);
    ctx.lineTo(x0 + maxWidth,y0);
    ctx.lineTo(x0 + maxWidth - marginWH,y0 - marginWH);

    ctx.moveTo(x0 + maxWidth,y0);
    ctx.lineTo(x0 + maxWidth - marginWH,y0 + marginWH);
    //设置颜色和线宽
    ctx.strokeStyle = 'blue';
    ctx.lineWidth = 5;
    //5.2绘制 描边
    ctx.stroke();

    //6.绘制竖坐标
    ctx.beginPath();
    ctx.moveTo(x0,y0);
    ctx.lineTo(x0,y0 - maxHeight);
    ctx.lineTo(x0 - marginWH,y0 - maxHeight + marginWH);

    ctx.moveTo(x0,y0 - maxHeight);
    ctx.lineTo(x0 +marginWH,y0 - maxHeight + marginWH);
    //设置颜色和线宽
    ctx.strokeStyle = 'blue';
    ctx.lineWidth = 5;
    //绘制 描边
    ctx.stroke();

    //7.绘制曲线
    //常量
    var data = [20, 50, 10, 60, 40, 80];
    //比例
    var w = maxWidth / data.length;
    var h = maxHeight / 100;//(1:100)设置比例
    //遍历
   //坐标点 类似于{x:20,y:30}
    var pointArr = [];
    for(var i = 0;i<data.length;i++){
        pointArr.push({
            x:x0 + w *(i+1),
            y: y0 - h * data[i]
        });
    }
    //遍历坐标点数组
    //开启路径
    ctx.beginPath();
    //起点
    ctx.moveTo(x0,y0);
    for(var i = 0;i<pointArr.length;i++){
        //终点
        ctx.lineTo(pointArr[i].x,pointArr[i].y);
    };
    //设置颜色和线宽
    ctx.strokeStyle = 'green';
    ctx.lineWidth = 2;

    //绘制 描边
    ctx.stroke();

</script>

2.3Canvas绘制画板

eg:
<script>
    //1.获取canvas和上下文
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    //2.监听鼠标的移动
    canvas.onmousedown = function (event){
        //清屏操作
        ctx.clearRect(0,0,canvas.width,canvas.height);
        //开启路径
        ctx.beginPath();
        //起点
        ctx.moveTo(event.offsetX, event.offsetY);
        canvas.onmousemove = function (event){
            //终点
            ctx.lineTo(event.offsetX, event.offsetY);

            //设置颜色和线宽
            ctx.strokeStyle = 'red';
            ctx.lineWidth = 5;
            //绘制 描边
            ctx.stroke();
        };
        canvas.onmouseup = function (){
            canvas.onmousemove = null;
            canvas.onmouseup = null;
        };

    };

2.4Canvas绘制矩形

1.方式1:先设置rect()方法,然后设置样式,再描绘ctx.stroke();

  • 语法:ctx.rect(x, y, width, height);
  • 解释:x, y是矩形左上角坐标, width和height都是以像素计

注意:

  • rect方法只是规划了矩形的路径,并没有填充和描边。
  • rect: abbr. 矩形(rectangular);收据(receipt)

2.方式2:快速创建描边矩形和填充矩形

  • 语法: ctx.strokeRect(x, y, width, height);
  • 参数跟ctx.rect相同,注意此方法绘制完路径后立即进行stroke绘制
  • 语法:ctx.fillRect(x, y, width, height);
  • 参数跟ctx.rect相同, 此方法执行完成后。立即对当前矩形进行fill填充。

3.清除矩形(clearRect)

  • 语法:ctx.clearRect(x, y, width, hegiht);

  • 解释:清除某个矩形内的绘制的内容,相当于橡皮擦。

      eg:
      <script>
      //1.获取canvas和上下文
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');
      //2.监听鼠标的移动
      canvas.onmousedown = function (event){
          //清屏操作
          ctx.clearRect(0,0,canvas.width,canvas.height);
          //开启路径
          ctx.beginPath();
          //起点
          ctx.moveTo(event.offsetX, event.offsetY);
          canvas.onmousemove = function (event){
              //终点
              ctx.lineTo(event.offsetX, event.offsetY);
    
              //设置颜色和线宽
              ctx.strokeStyle = 'red';
              ctx.lineWidth = 5;
              //绘制 描边
              ctx.stroke();
          };
          canvas.onmouseup = function (){
              canvas.onmousemove = null;
              canvas.onmouseup = null;
          };
    
      };
    

2.5Canvas绘制弧线

2.51 绘制圆形(arc)

01 arc()方法说明:

  • 概述:arc() 方法创建弧/曲线(用于创建圆或部分圆)。
  • 语法:ctx.arc(x,y,r,sAngle,eAngle,counterclockwise);
  • arc: 弧(度)弧形物;天穹 英 [ɑːk] 美 [ɑrk]
  • counter 反击,还击;反向移动,对着干;反驳,回答 ['kaʊntə] 美 ['kaʊntɚ]
  • x,y:圆心坐标。
  • r:半径大小。
  • sAngle:绘制开始的角度。 圆心到最右边点是0度,顺时针方向弧度增大。
  • eAngel:结束的角度,注意是弧度。π
  • counterclockwise:是否是逆时针。true是逆时针,false:顺时针(默认)
  • 弧度和角度的转换公式: rad = deg*Math.PI/180;
  • 在Math提供的方法中sin、cos等都使用的弧度

三角函数的补充:

  • Math.sin(弧度); //夹角对面的边 和 斜边的比值
  • Math.cos(弧度); //夹角侧边 与斜边的比值

圆形上面的点的坐标的计算公式:

  • x =x0 + Math.cos(rad) * R;//x0和y0是圆心点坐标
  • y =y0 + Math.sin(rad) * R;//注意都是弧度

三角函数

三角函数

2.6非零正交原则

varcanvas=document.getElementById;varcontext=canvas.getContext;context.font="normal36pxVerdana";context.fillStyle="#000000";context.fillText("HTML5CanvasText",50,50);context.font="normal36pxArial";context.strokeStyle="#000000";context.strokeText("HTML5CanvasText",50,90);

下面是一个简单的例子,在Canvas中绘制了一个蓝色边框和绿色填充的矩形:

01

  • 语法:ctx.fill();
  • 解释: 填充,是将闭合的路径的内容填充具体的颜色。默认黑色
  • 注意:交叉路径的填充问题,“非零环绕原则”,顺逆时针穿插次数决定是否填充。

下面的图片是上面代码的返回结果:

你的浏览器不支持HTML5 Canvas!

02非零正交原则原则

使用一个初始值为0 的计数器判断该区域是否填充?

  • 1.对于路径中任意给定的区域,从该区域内部画一条足够长的线段,使此线段的终点完全落在路径范围外部.
  • 2.如果线段是与路径的顺时针部分相交,则计数器加1,
  • 3.如果线段是与路径的逆时针部分相交,则计数器减1
  • 4.若计数器的最终值不是0,那么此区域就在路径里面,在调用fill()方法时,浏览器就会对其进行填充
  • 5.如果计数器最终值是0,那么此区域就不在路径内部,浏览器也就不会对其进行填充

应用: 圆环

eg:
<script>
    //1.获取canvas和上下文
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    //2.绘制圆环
    //内圆
    ctx.arc(200,200,100,0,2 * Math.PI,false);
    //外圆
    ctx.arc(200,200,200,0,2 * Math.PI,true);
    //填充颜色
    ctx.fillStyle = 'pink';
    ctx.fill();
</script>

2.7Canvas绘制五环

eg:
<script>
    //1.获取canvas和上下文
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    //2.绘制奥运五环
    //第一个五环
    //遍历
    //颜色数组
    var colorArr = ['red','green','yellow','blue','black'];
    for(var i = 0;i<5;i++){
        ctx.beginPath();
        ctx.arc(100 *(i+1),150,80,0,2 * Math.PI);
        ctx.strokeStyle = colorArr[i];
        ctx.lineWidth = 5;
        ctx.stroke();
    };

    //绘制第二个五环
    var colorArr = ['red','green','yellow','blue','black'];
    for(var i = 0;i<5;i++){//0,1,2
        ctx.beginPath();
        if(i<3){
            ctx.arc(100 *(i+1),350,80,0,2 * Math.PI);
        }else{//3,4
            ctx.arc(100 *(i-2) + 40,350 + 80,80,0,2 * Math.PI);
        }
        ctx.strokeStyle = colorArr[i];
        ctx.lineWidth = 5;
        ctx.stroke();
    };

</script>

2.8Canvas绘制饼状图

eg:
<script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    //2.绘制饼状图
    //常量
    var canW = canvas.width * 0.5;//圆心
    var canH = canvas.height * 0.5;//圆心
    var radius = 150;
    //数据
    var dataArr = [
        {name:'北京',color:'yellow',value:'0.3'},
        {name:'上海',color:'red',value:'0.2'},
        {name:'广州',color:'green',value:'0.1'},
        {name:'深圳',color:'blue',value:'0.15'},
        {name:'杭州',color:'purple',value:'0.25'}
    ];
    //3.遍历并绘制扇形
    var beginAngle = -90 * Math.PI/180;
    for(var i= 0;i<dataArr.length;i++){
        //3.1获取每一个扇形的角度
        var temAngle = dataArr[i].value *360 *Math.PI/180;
        //3.2获取终点
        var endAngle = beginAngle + temAngle;
        //开启新路径
        ctx.beginPath();
        ctx.moveTo(canW,canH);
        ctx.arc(canW,canH,radius,beginAngle,endAngle);
        ctx.fillStyle = dataArr[i].color;
        ctx.fill();

        //更新起点
        beginAngle = endAngle;
    }
</script>

2.9Canvas绘制文字

01.绘制上下文的文字属性

  • font 设置或返回文本内容的当前字体属性

  • font 属性使用的语法与 CSS font 属性相同。

      eg:
      ctx.font = "18px '微软雅黑'";
    
  • textAlign 设置或返回文本内容的当前对齐方式

  • start : 默认。文本在指定的位置开始。

  • end : 文本在指定的位置结束。

  • center: 文本的中心被放置在指定的位置。

  • left : 文本左对齐。

  • right : 文本右对齐。

      eg:
      ctx.textAlign = 'left';
    
  • textBaseline 设置或返回在绘制文本时使用的当前文本基线

  • alphabetic : 默认。文本基线是普通的字母基线。

  • top : 文本基线是 em 方框的顶端。。

  • hanging : 文本基线是悬挂基线。

  • middle : 文本基线是 em 方框的正中。

  • ideographic: 文本基线是em基线。

  • bottom : 文本基线是 em 方框的底端。

      eg:
      ctx.textBaseline = 'top';
      单词:
      alphabetic: 字母的;照字母次序的   [,ælfə'bɛtɪk]
      ideographic:表意的;表意字构成的   英 [,ɪdɪəʊ'ɡræfɪk]   美 [,ɪdɪə'græfɪk]
    

02 上下文绘制文字的方法

  • ctx.fillText() 在画布上绘制“被填充的”文本

  • ctx.strokeText() 在画布上绘制文本(无填充)

  • ctx.measureText() 返回包含指定文本宽度的对象

  • 单词:measure 测量;估量;权衡 英 ['meʒə] 美 ['mɛʒɚ]

      eg:
      //综合案例代码:
      ctx.moveTo( 300, 300 );
      ctx.fillStyle = "purple";               //设置填充颜色为紫色
      ctx.font = '20px "微软雅黑"';           //设置字体
      ctx.textBaseline = "bottom";            //设置字体底线对齐绘制基线
      ctx.textAlign = "left";                 //设置字体对齐的方式
      //ctx.strokeText( "left", 450, 400 );
      ctx.fillText( "Top-g", 100, 300 );        //填充文字
    

03 文字阴影和模糊范围

  • ctx.shadowColor

  • ctx.shadowBlur

      eg:
       //设置阴影的颜色
      ctx.shadowColor = 'orange';
    
      //设置模糊范围
      ctx.shadowBlur = 15;
      ctx.shadowOffsetX = -10; //水平偏移量
      ctx.shadowOffsetY = 20; //垂直偏移量
    

    eg:
    <script>
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        //2.绘制文字
        //设置文字字号
        ctx.font = "100px '微软雅黑'";
        //颜色和线宽
        ctx.strokeStyle = 'red';
        ctx.lineWidth = 4;
        //无填充文字
        ctx.strokeText('Never Say No',200,200);

        //填充颜色
        ctx.fillStyle = 'purple';
        //有填充的文字
        ctx.fillText('Never Say No',200,200);

        //3.绘制第二个文字

        //4.修改垂直对齐方式
        //注意:一旦文字绘制完,就有一条确定的基线,只要调整对齐的方式,都会根据基线调整
        //ctx.textAlign = 'center';

        //5.水平对齐方式
        ctx.textBaseline = 'top';

        //6.模糊效果
        ctx.shadowBlur = 15;

        //阴影颜色
        ctx.shadowColor = 'blue';
        //阴影偏移方向
        ctx.shadowOffsetX = -15;
        ctx.shadowOffsetY = -15;

    //无填充文字
        ctx.strokeText('I Miss You',200,320);
    //有填充文字
        ctx.fillStyle = 'orange';
        ctx.fillText('I Miss You',200,320);

    </script>

2.10Canvas绘制饼状图以及绘制文字

eg:
<script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    //2.绘制饼状图
    //常量
    var canW = canvas.width * 0.5;//圆心
    var canH = canvas.height * 0.5;//圆心
    var radius = 150;
    //数据
    var dataArr = [
        {name:'北京',color:'yellow',value:'0.3'},
        {name:'上海',color:'red',value:'0.2'},
        {name:'广州',color:'green',value:'0.1'},
        {name:'深圳',color:'blue',value:'0.15'},
        {name:'杭州',color:'purple',value:'0.25'}
    ];
    //3.遍历并绘制扇形
    var beginAngle = -90 * Math.PI/180;
    for(var i= 0;i<dataArr.length;i++){
        //3.1获取每一个扇形的角度
        var temAngle = dataArr[i].value *360 *Math.PI/180;
        //3.2获取终点
        var endAngle = beginAngle + temAngle;
        //开启新路径
        ctx.beginPath();
        ctx.moveTo(canW,canH);
        ctx.arc(canW,canH,radius,beginAngle,endAngle);
        ctx.fillStyle = dataArr[i].color;
        ctx.fill();

        //3.3绘制文字
        //获取每一个文字的角度
        var textAngle = beginAngle + temAngle * 0.5;
        //文字坐标
        var textX = canW + (radius+30)* Math.cos(textAngle);
        var textY = canH + (radius+30)* Math.sin(textAngle);
        //获取文字内容
        var text = dataArr[i].name + dataArr[i].value *100 + '%';
        //设置文字字号
        ctx.font = "20px '微弱雅黑'";
        ctx.strokeStyle = dataArr[i].color;
        //设置左边文字的对齐方式
        if(textAngle>90 * Math.PI/180 && textAngle<270 *Math.PI/180){
            ctx.textAlign = 'end';
        }
        ctx.strokeText(text,textX,textY);
        //更新起点,让当前的终点角度成为下一个图形的起点的角度
        beginAngle = endAngle;
    }
</script>

2.11Canvas绘制图片

01 基本的绘制图片的方式

  • 语法:context.drawImage(img,x,y);
  • 参数说明: x,y 绘制图片左上角的坐标,在画布上绘制的坐标点 img是绘制图片的dom对象

02 在画布上绘制图像,并规定图像的宽度和高度

  • 语法:context.drawImage(img,x,y,width,height);
  • 参数说明:width 绘制图片的宽度, height:绘制图片的高度
  • 如果指定宽高,最好成比例,不然图片会被拉伸
  • 等比公式: toH = Height * toW / Width;
  • 设置的高度 = 原高度 * 设置的宽度 / 原宽度;

03 图片裁剪 ,并在画布上定位被裁剪的部分

  • 语法:context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
  • 参数说明:
    • sx,sy 裁剪的左上角坐标,
    • swidth:裁剪图片的高度。
    • sheight:裁剪的高度
    • 其他同上

美高梅app,04 用JavaScript创建img对象

第一种方式:直接添加图片

eg:var img = document.getElementById("imgId");

第二种方式:创建图片对象

eg:
var img = new Image();//这个就是 img标签的dom对象
img.src = "imgs/arc.gif";
img.alt = "文本信息";
img.onload = function() {
//图片加载完成后,执行此方法

示意图:
原图片:

eg:ctx.drawImage(img, 100, 100, 300, 216);

截取图片:

eg:
裁剪的位置: sx,sy,swidth,sheight : 50 50 120 120
sx,sy,swidth,sheight 相对于原图片的裁剪区域

放置位置:x,y,width,height : 350, 100, 120, 120
x, y ,width, height 相对于画布的显示区域
ctx.drawImage(img, 50, 50, 120, 120, 450, 100, 120, 120);

图片说明:

美高梅app 1

eg:
<script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    //2.绘制图片  方式一  标签绘制
    /*var img = document.getElementById('img');
    //注意:图片一定要在加载完成后再进行绘制
    //x,y 绘制图片左上角的坐标,在画布上绘制的坐标点 img是绘制图片的dom对象。
    img.onload = function (){
        ctx.drawImage(img,100,100);
    }*/

    //3.绘制图片 方式二 对象绘制
    /*var image = new Image();
    image.src = 'images/img_01.jpg';
    image.addEventListener('load',function(){
        ctx.drawImage(image,100,100);
    });*/

    //4.绘制图片  方式三 对象绘制   等比例
    /*var image = new Image();
    image.src = 'images/img_01.jpg';
    image.addEventListener('load',function (){
        //等比公式  w / h = 图片的宽/ 图片的高;
        var w = 200;
        var h = w * image.height / image.width;
        ctx.drawImage(image,w,h);
    });*/

    //5.图片截取
    //方法:context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
    var image1 = new Image();
    image1.src = 'images/img_01.jpg';
    image1.addEventListener('load',function (){
        //img:截取图片
        //50,50,120,120  表示截取的x,y, 截取的宽和高
        //200,200,120,120  表示在画布上的x,y和宽高
        ctx.drawImage(image1,50,50,120,120,200,200,120,120);
    });

</script>

2.12Canvas绘制帧动画

eg:
<body style="padding: 100px">
<canvas id="canvas" width="900" height="600" style="border: 1px solid #000;"></canvas>
<!--![](images/img_01.jpg)-->
<button dir=2>上</button>
<button dir=6>下</button>
<button dir=0>左</button>
<button dir=4>右</button>
<p></p>
<script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    //2.绘制图片
    var image = new Image();
    image.src = 'images/girl.png';
    //常量
    var clipWH = 256;
    var index = 0;//累加的变量

    var dir = 0;//设置默认的方向为0;
    image.addEventListener('load',function (){
        //记录this
        var that = this;
        //开启定时器
        setInterval(function (){
            //清屏
            ctx.clearRect(0,0,canvas.width,canvas.height);
            ctx.drawImage(that,index*clipWH,dir*clipWH,clipWH,clipWH,200,200,clipWH,clipWH);
            //累加
            index++;
            //取余---让其无限的循环//让他永远等于 0-7
            index %= 8;
        },200);

    });

    //点击按钮,切换动画
    //获取所有的按钮,根据字符串,获取所有的子元素
    var buttonList = document.querySelectorAll('button');
    for(var i= 0;i<buttonList.length;i++){
        //给所有的按钮添加点击事件
        buttonList[i].addEventListener('click',function (){
            //获取按钮中的dir中的值
            dir = this.getAttribute('dir');
        });
    }
</script>

你的浏览器不支持HTML5 Canvas!

上面例子的实现代码如下:

字体和样式

//1.等待页面DOM元素加载完毕window.onload=function;}functiondrawExamples(){//2.获取canvas元素的引用varcanvas=document.getElementById;//3.从canvas元素中获取一个2Dcontextvarcontext=canvas.getContext;//4.绘制图形context.fillStyle="#009900";context.fillRect;context.strokeStyle="#0000ff";context.lineWidth=5;context.strokeRect;}

当在HTML5 canvas上绘制文字的时候,我们可以设置文字的字体和样式。我们可以通过一组2D上下文的font属性来完成这些工作。这些属性和CSS中设置字体的属性是兼容的:

注意上面的填充样式和描边样式是分别设置的。分别是使用2D上下文的strokeStylefillStyle属性。

[fontstyle][fontweight][fontsize][fontface]

描边的宽度使用的是lineWidth属性,lineWidth设置为5表示矩形的外边框的线条宽度为5个单位。

举例来说,我们可以这样设置字体:

绘制矩形

context.font="normalnormal20pxVerdana";

在HTML5 canvas中,可以绘制的最简单的图形莫过于绘制一个矩形。在上面的例子中我们就绘制了两个矩形。它们分别是通过2D上下文的fillRect()方法和strokeRect()方法来实现的。

对于上面的这些属性,我们可以有下面的一些可取值:

varcanvas=document.getElementById;varcontext=canvas.getContext;context.fillStyle="#ff0000";context.fillRect;context.strokeStyle="#0000ff";context.strokeRect;

font style可取值有:

你的浏览器不支持HTML5 Canvas!

normal

fillRect方法用于绘制一个填充颜色的矩形。它由xy属性决定矩形的左上角位置,widthheight实现决定矩形的宽度和高度。

italic

请记住,canvas的坐标系统由canvas的左上角坐标开始,然后X轴向右为正值方向,Y轴向下为正值方向。它的Y轴和正常的几何坐标系统是相反的。

oblique

xywidthheight4个变量作为参数传入fillRect()中,用以确定如何绘制这个矩形。下面是一个例子:

inherit

varx=10;vary=10;varwidth=100;varheight=100;context.fillRect;

font weight可取值有:

下面是上面的代码所绘制的矩形:

normal

你的浏览器不支持HTML5 Canvas!

bold

上面的矩形是黑色的,是因为我们没有设置2D上下文的fillStyle属性,它默认的颜色就是黑色的。

bolder

strokeRect()

lighter

strokeRect()方法用于绘制一个描边矩形,没有填充色。同样,它由xy属性决定矩形的左上角位置,widthheight实现决定矩形的宽度和高度。熄灭是一个例子:

auto

varx=10;vary=10;varwidth=100;varheight=100;context.strokeRect;

inherit

上面代码的返回结果如下:

100

你的浏览器不支持HTML5 Canvas!

200

同样,在我们没有设置2D上下文的strokeStyle属性的情况下,描边色是黑色的。

本文由mgm娱乐网址发布于mgm娱乐网址,转载请注明出处:在Canvas中绘制了一个蓝色边框和绿色填充的矩形

关键词: