xml地图|网站地图|网站标签 [设为首页] [加入收藏]

H5的canvas绘图技术

来源:http://www.ccidsi.com 作者:呼叫中心培训课程 人气:198 发布时间:2019-05-07
摘要:1.5  绘制矩形 飞速创制矩形rect()方法   语法:ctx.rect(x, y, width, height);   * 解释:x, y是矩形左上角坐标, width和height都以以像素计 * rect方法只是铺排性了矩形的路线,并不曾填写和描边

1.5 绘制矩形

  1. 飞速创制矩形rect()方法

 

语法:ctx.rect(x, y, width, height);

 

* 解释:x, y是矩形左上角坐标, width和height都以以像素计

* rect方法只是铺排性了矩形的路线,并不曾填写和描边。

2.创造描边矩形

 

 

 

语法:ctx.strokeRect(x, y, width, height);

 

参数跟rect(x, y, width, height)一样,注意此情势绘制完路线后迅即打开stroke绘制。

3.始建填充矩形

语法:ctx.fillRect(x, y, width, height);

参数跟rect(x, y, width, height)一样, 此方法实施到位后,马上对当前矩形实行fill填充。

4.免除矩形(clearReact)

 

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

 

* 解释:清除某些矩形内的绘图的剧情,约等于橡皮擦。

 

<canvas id="mcanvas">你的浏览器不支持canvas,请升级浏览器</canvas>
    <script>

        var mcanvas  = document.getElementById("mcanvas");    //获得画布

        var mcontext = mcanvas.getContext("2d");    //获得上下文

        mcanvas.width = 900;     //重新设置标签的属性宽高
        mcanvas.height = 600;    //千万不要用 canvas.style.height

        //rect方法只是规划了矩形的路径,并没有填充和描边,需要单独描边或填充。
        mcontext.rect(20,20,300,200);
        mcontext.stroke();

        //快速创建一个描边的矩形
        mcontext.strokeRect(400,20,300,200);

        //快速创建一个填充的矩形
        mcontext.fillRect(20,300,300,200);

        //在画布上创建一个矩形区域,该矩形区域中的图形都会被清除
        mcontext.clearRect(120,350,100,100);

    </script>

《版本帮助》

1.6 绘制圆形

arc() 方法用于成立弧线(用于创建圆或一些圆)。

 

语法:ctx.arc(x, y, r, startAngle, endAngle, counterclockwise);

 

解释:
x,y:圆心坐标。
r:半径大小。
sAngle:绘制开始的角度。 圆心到最右边点是0度,顺时针方向弧度增大。
eAngel:结束的角度,注意是弧度。
counterclockwise:是否是逆时针,默认是false。true是逆时针,false:顺时针

注意:弧度和角度的转换公式: rad = deg*Math.PI/180;

图片 1

绘图圆形和饼图

<canvas id="mcanvas">你的浏览器不支持canvas,请升级浏览器</canvas>
    <script>

        var mcanvas  = document.getElementById("mcanvas");    //获得画布
        var mcontext = mcanvas.getContext("2d");    //获得上下文
        mcanvas.width = 900;     
        mcanvas.height = 600;  

        //绘制圆形  
        mcontext.beginPath();
        mcontext.arc(200,200,100,0,360*Math.PI/180);
        mcontext.closePath();
        mcontext.stroke();

        // 通过数据进行绘制饼图
        var data = [{
            "value": .2,
            "color": "red",
            "title": "应届生"
        },{
            "value": .3,
            "color": "blue",
            "title": "社会招生"
        },{
            "value": .4,
            "color": "green",
            "title": "老学员推荐"
        },{
            "value": .1,
            "color": "#ccc",
            "title": "公开课"
        }];

        var tempAngle = -90;
        var x0 = 600, y0 = 300;
        var raduis = 200;

        for(var i = 0; i < data.length; i  ) {
            mcontext.beginPath();
            mcontext.moveTo(x0, y0);
            var angle = data[i].value * 360;
            var startAngle = tempAngle*Math.PI/180;
            var endAngle  = (tempAngle angle)*Math.PI/180;
            mcontext.fillStyle = data[i].color;
            mcontext.arc(x0, y0, raduis, startAngle, endAngle);
            mcontext.closePath();
            mcontext.fill();
            tempAngle  = angle;
        }

    </script>

三角形函数的增加补充:

Math.sin(弧度); //夹角对面包车型客车边 和 斜边的比值

Math.cos(弧度); //夹角侧边与斜边的比值

圆形上边的点的坐标的总计公式

x =x0 Math.cos(rad) * Haval;//x0和y0是圆心点坐标

y =y0 Math.sin(rad) * 中华V;//注意都是弧度 

图片 2

1.7 绘图像和文字字

canvas 提供了三种办法来渲染文本:

 

fillText(text, x, y [, maxWidth])

 

在钦命的(x,y)地方填写钦命的文书,绘制的最大开间是可选的.

 

strokeText(text, x, y [, maxWidth])

 

在钦定的(x,y)地方绘制文本边框,绘制的最大开间是可选的.

 

示例1

 

文件用当下的填写情势被填充:

var ctx = document.getElementById('canvas').getContext('2d');

 ctx.font = "48px serif";
 ctx.fillText("Hello world", 10, 50);

示例2

文件用当下的边框样式被绘制:

 var ctx = document.getElementById('canvas').getContext('2d');
  ctx.font = "48px serif";
  ctx.strokeText("Hello world", 10, 50);

文件样式

font = value: 最近大家用来绘制文本的样式. 那一个字符串使用和 CSS font 属性同样的语法. 暗中认可的书体是 十px sans-serif。

textAlign = value: 文本对齐选项. 可选的值包罗:start, end, left, right or center. 私下认可值是 start。

图片 3

 

textBaseline = value:  基线对齐选项. 可选的值包蕴:top, hanging, middle, 阿尔法betic, ideographic, bottom。默许值是 alphabetic。

图片 4

 

代码示例:

<canvas id="mcanvas">你的浏览器不支持canvas,请升级浏览器</canvas>
    <script>

        var mcanvas  = document.getElementById("mcanvas");    //获得画布
        var mcontext = mcanvas.getContext("2d");    //获得上下文
        mcanvas.width = 900;     
        mcanvas.height = 600;  

        mcontext.fillStyle = "#0000ff";
        mcontext.font = "italic 30px 微软雅黑";
        mcontext.textAlign = "start";
        mcontext.textBaseline = "top";
        mcontext.fillText("你好", 200, 0, 100);

        mcontext.font = "italic 30px 微软雅黑";
        mcontext.textAlign = "left";
        mcontext.textBaseline = "top";
        mcontext.fillText("你好", 200, 50, 100);

        mcontext.font = "bold 30px 黑体";
        mcontext.textAlign = "center";
        mcontext.textBaseline = "top";
        mcontext.strokeText("你好", 200, 100, 100);

        mcontext.font = "bold 30px 黑体";
        mcontext.textAlign = "right";
        mcontext.textBaseline = "top";
        mcontext.strokeText("你好", 200, 150, 100);

        mcontext.font = "bold 30px 黑体";
        mcontext.textAlign = "end";
        mcontext.textBaseline = "top";
        mcontext.strokeText("你好", 200, 200, 100);

    </script>

* 解释:遵照路线绘制线。路线只是草稿,真正绘制线必须实行stroke

1.8绘图图像

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

 

单位: px,能够设置width和height属性,不然忽略单位。

1.3 canvas坐标系

在起来绘制任何图像在此之前,我们先讲一下canvas的坐标系。canvas坐标系是以左上角0,0处为坐标原点,水平方向为x轴,向右为正;垂直方向为y轴,向下为正。如下图所示:

图片 5

* 解释:设置上下文绘制路线的起源。也等于移动画笔到某些地方

1.4 绘制线径

  1. 获得上下文对象(CanvasRenderingContext二D)

率先,获取canvas成分,然后调用成分的getContext(“贰d”)方法,该措施重回1个CanvasRenderingContext二D对象,使用该目的就足以在画布上绘制了。

 

var mcanvas  = document.getElementById("mcanvas");
var mcontext = mcanvas.getContext("2d");

  2.装置绘制源点(moveTo)

//语法:
ctx.moveTo(x, y); 

* 解释:设置上下文绘制路线的源点。也正是运动画笔到有个别地方。

* 参数:x,y 都是相持于 canvas坐标系的原点(左上角)。

* 注意: 绘制线段前务必先安装起源,不然绘制无效。借使不进行安装,就可以利用lineTo的坐标当作moveTo

3.绘图直线(lineTo)

//语法:
ctx.lineTo(x, y);

* 解释:从上一步设置的绘图源点绘制一条直线到(x, y)点。

* 参数:x,y 目的点坐标。

4.路径的启幕和关闭

//开始路径:
ctx.beginPath();
//闭合路径:
ctx.closePath();

* 解释:假使绘制路线相比复杂,必须使用路线始于和终止。闭合路线会自动把最后的线头和初叶的线头连在一齐。

* beginPath: 主题的法力是将差别绘制的形象实行隔绝,每便实践此方法,表示重新绘制三个门路,跟此前的绘图的手笔能够开始展览分离样式设置和管制。

5.制图图形(stroke)

//语法:
ctx.stroke();

* 解释:依据路线绘制线。路径只是草稿,真正绘制线必须进行stroke

 

在绘制从前,还足以对画笔的颜色和粗细举办设置进行安装,方法如下:

//语法:
ctx.strokeStyle = “#ff0000”;
ctx.lineWidth = 4;  //值为不带单位的数字,并且大于0

6.填充图形(fill)

//语法:
ctx.fill();

* 解释:对已经画好的图样进行填空颜色。

 

在填充此前,一样能够对所填写的颜色举办设置,方法如下:

//语法:
ctx.fileStyle = “#0000ff”;

7.canvas绘制的主导步骤:

 

率先步:获得上下文 =>canvasElem.getContext('贰d');

 

第一步:起首路线设计 =>ctx.beginPath()

 

其三步:移动起首点 =>ctx.moveTo(x, y)

 

第四步:绘制线(线条、矩形、圆形、图片...) =>ctx.lineTo(x, y)

 

第伍步:闭合路线=>ctx.closePath();

 

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

 

案例:通过地点所学的主意绘制八个三角形。

    <canvas id="mcanvas">你的浏览器不支持canvas,请升级浏览器</canvas>
    <script>

        var mcanvas  = document.getElementById("mcanvas");    //获得画布

        var mcontext = mcanvas.getContext("2d");    //获得上下文

        mcanvas.width = 900;     //重新设置标签的属性宽高
        mcanvas.height = 600;    //千万不要用 canvas.style.height

        mcanvas.style.border = "1px solid #000";    //设置canvas的边

        //绘制三角形
        mcontext.beginPath();        //开始路径
        mcontext.moveTo(100,100);    //三角形,左顶点
        mcontext.lineTo(300, 100);   //右顶点
        mcontext.lineTo(300, 300);   //底部的点
        mcontext.closePath();        //结束路径
        mcontext.stroke();           //描边路径

    </script>

案例:驾驭canvas基于状态的绘图

 

<canvas id="mcanvas">你的浏览器不支持canvas,请升级浏览器</canvas>
    <script>

        var mcanvas  = document.getElementById("mcanvas");    //获得画布

        var mcontext = mcanvas.getContext("2d");    //获得上下文

 

mcanvas.width = 900;     //重新设置标签的属性宽高
        mcanvas.height = 600;    //千万不要用 canvas.style.height

        mcanvas.style.border = "1px solid #000";    //设置canvas的边

        mcontext.strokeStyle = "#ff0000";    //设置画笔的颜色
        mcontext.lineWidth = 2;                //设置画笔的粗细
        mcontext.fillStyle = "#00ff00";        //设置填充图形的颜色

        //绘制三角形
        mcontext.beginPath();        //开始路径
        mcontext.moveTo(100,100);    //三角形,左顶点
        mcontext.lineTo(300, 100);   //右顶点
        mcontext.lineTo(300, 300);   //底部的点
        mcontext.closePath();        //结束路径
           mcontext.stroke();           //描边路径       
        //mcontext.fill();             //填充图形

        //绘制矩形
        mcontext.beginPath();    //开启了一个新状态(新线径),
                              //新状态可以继承之前状态的样式,
                              //但是当前状态设置的所有样式只能用于当前状态。

 //mcontext.strokeStyle = "#00ff00";//为当前状态设置的样式
        mcontext.moveTo(500,100);    //起始点
        mcontext.lineTo(800,100);    //上边
        mcontext.lineTo(800,300);    //右边
        mcontext.lineTo(500,300);    //下边
        mcontext.closePath();
        mcontext.stroke();

javascript部分:

一.中坚绘制图片的不2秘技

 

context.drawImage(img,x,y);

 

参数表达: x,y 绘制图片左上角的坐标, img是绘制图片的dom对象。

2.在画布上绘制图像,并鲜明图像的大幅度和中度

context.drawImage(img,x,y,width,height);  

参数表明:width 绘制图片的幅度,  height:绘制图片的可观

即使钦定宽高,最佳成比例,否则图片会被拉伸

设置高 = 原高度 * 设置宽/ 原宽度;

3.图表裁剪,并在画布上稳住被裁剪的一部分

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

参数表达:

    sx,sy 裁剪的左上角坐标,

    swidth:裁剪图片的冲天。 sheight:裁剪的冲天

其它同上

4.用javascript创建img对象

 

地点提供的2个法子,都亟需三个Image对象作为参数,上边介绍了两种创设Image对象的方法。须要专注的是,为Image的src属性赋值后,Image对象会去装载内定图片,但那种装载是异步的,假设图片太大或则图片来自网络,且网络传输速度慢,Image对象装载图片就能供给:一定的光阴支出。为了确定保证图片装载达成后才去绘制图片,能够监听Image对象的onload回调事件,然后在事件管理函数中绘制图片,如下所示:

 

率先种艺术:

  var img = document.getElementById("imgId");
    img.onload = function(){  //图片加载完成后,执行此方法
      mcontext.drawImage(img, 10, 10);
    }

其次种格局:

var img = document.createElement("img");
        img.src = "img/a.jpg";
        img.alt = "谁笑谁是小狗";
        img.onload = function(){  //图片加载完成后,执行此方法
            mcontext.drawImage(img, 10, 10);
        }

其三种办法:

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

    }

 

设置的莫斯中国科学技术大学学 = 原高度 * 设置的上升的幅度 / 原宽度;

canvas元素是HTML5中新充裕的多个成分,该因素是HTML5中的3个优点。Canvas成分就如一块画布,通过该因素自带的API结合JavaScript代码能够绘制种种图片和图像以及动画效果。

2.三.七 急迅创造矩形rect()方法

1.1 浏览器不包容难点

  • ie九以上才支撑canvas, 其余chrome、firefox、苹果浏览器等都协理
  •  只要浏览器包容canvas,那么就能够匡助多边api(个别最新api除此之外)
  •  移动端的兼容情状尤其精美,基本上随意选择
  •  2d的支撑的都十三分好,三d(webgl)ie11才支撑,其余都援助
  •  就算浏览器不包容,最棒开始展览和谐提醒,提醒内容只有在浏览器不帮忙时才显得。

    //例如:

    你的浏览器不支持canvas,请升级浏览器

 浏览器不相配,也足以运用flash等花招进行优雅降级

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

1.2 成立画布

在页面中成立canvas成分与创立其余因素一样,只必要加多多少个<canvas>标志就可以。该因素默许的宽高为300*壹5,能够透过成分的width属性和height属性更改暗许的宽高。

注意:

  •  不能够接纳CSS样式调控canvas成分的宽高,不然会产生绘制的图纸拉伸。

 

  • 再度安装canvas标签的宽高属性会促成画布擦除拥有的内容。

 

  • 能够给canvas画布设置背景观

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

2.3.6 填充(fill)

此时此刻浏览器不援助canvas,请晋级浏览器版本

ctx.lineTo(300, 100);   //右顶点

* 语法:ctx.fill();

Math.cos(弧度); //夹角侧边 与斜边的比率

首先种方法:

counter 反扑,反扑;反向移动,对着干;反驳,回答 ['kaʊntə] 美 ['kaʊntɚ]

能够给canvas画布设置背景观

其次种形式:

别的同上

语法:ctx.arc(x,y,r,sAngle,eAngle,counterclockwise);

ctx.moveTo(100,100);    //三角形,左顶点

再也设置canvas标签的宽高属性会让画布擦除具有的内容,

height:绘制图片的惊人

* rect方法只是布署了矩形的路线,并从未填写和描边。

y =y0 Math.sin(rad) * Odyssey;//注意都以弧度

img.src = "imgs/arc.gif";

上下文:是具有的绘图操作api的入口大概聚众。

ctx.font = '20px "微软雅黑"';           //设置字体

一抬手一动脚设备差不多支持Canvas的富有API

二.三.8 飞快创设描边矩形和填充矩形

* 参数:x,y 线头点坐标。

二.陆.1 基本绘制图片的措施

width和hegiht:默认300*150像素

context.drawImage(img,x,y);

* 语法:ctx.lineTo(x, y);

canvas:画布油布的乐趣 英 ['kænvəs] 美 ['kænvəs]

context.drawImage(img,x,y,width,height);

canvas.style.border = "1px solid #000";

//图片加载成功后,实施此办法

* 解释:纵然复杂路线绘制,必须选择路线始于和竣事。闭合路线会自动把末了的线头和开端的线头连在一同。

参数表达:width 绘制图片的上升的幅度,

arc: 弧(度)弧形物;天穹 英 [ɑːk] 美 [ɑrk]

}

swidth:裁剪图片的可观。 sheight:裁剪的冲天

ctx.stroke();           //描边路径

二.一.二 浏览器不相称管理(重视)

}

* 开端路线:ctx.beginPath();

二.六.二 在画布上绘制图像,并明确图像的宽度和可观

《二.四 绘制圆形(arc)》

img.alt = "文本新闻";

其三步:移动开端点 =>ctx.moveTo(x, y)

* 参数:x,y 都以相对于 canvas盒子的最左上角。

img.alt = "文本音信";

var img = new Image();//那个正是img标签的dom对象

2.1.一 canvas标签语法和属性 (入眼)

ctx.fillStyle = "purple";               //设置填充颜色为碧绿

* 闭合路线:ctx.closePath();

var img = new Image();//那个就是 img标签的dom对象

等比公式:  toH = Height * toW   /  Width;

//综合案例代码:

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

圆形上边包车型客车点的坐标的总计公式

ctx.textBaseline = "bottom";            //设置字体底线对齐绘制基线

r:半径大小。

注意的知识点:

var canvas = document.querySelector('#canvas');

sx,sy 裁剪的左上角坐标,

* 解释:从x,y的地点绘制一条直线到源点依然上3个线头点。

参数表达: x,y 绘制图片左上角的坐标, img是绘制图片的dom对象。

注意:

ctx.lineTo(300, 300);   //尾巴部分的点

假定浏览器不包容,最佳开始展览友好提醒, 举个例子:

贰.3.玖免去矩形(clearRect)

Canvas自个儿无法绘制任何内容,Canvas的绘图是利用JS调用Canvas的接口来实现的。

* 解释:清除某些矩形内的绘图的剧情,相当于橡皮擦。

* 注意:**制图线段前必须先安装起源,不然绘制无效。**

标签名:canvas,双标签,必要关闭。

sAngle:绘制先导的角度。 圆心到最左边点是0度,顺时针方向弧度增大。

二.5.二 上下文绘制文字方式

//ctx.strokeText( "left", 450, 400 );

本文由68399皇家赌场发布于呼叫中心培训课程,转载请注明出处:H5的canvas绘图技术

关键词: 68399皇家赌场 Canvas

上一篇:元组Tuple差异化理解,python学习列表

下一篇:没有了

最火资讯