一、canvas简介

​ <canvas> 是 HTML5 新添的,一个能够运用脚本(平日为JavaScript)在里面绘制图像的 HTML 成分。它可以用来创造照片集可能制作轻松(也不是那么粗略)的卡通片,以致足以举办实时摄像拍卖和渲染。


它最初由苹果内部采纳自个儿MacOS X WebKit生产,供应用程序使用像仪表盘的预制构件和 Safari 浏览器接纳。
后来,有人通过Gecko基础的浏览器
(特别是MozillaFirefox),OperaChrome和超文本网络使用技工组提议为后辈的网络技巧利用该因素。

​ Canvas是由HTML代码合营中度和宽窄属性而定义出的可绘制区域。JavaScript代码能够访问该区域,类似于别的通用的2维API,通过一套完整的绘图函数来动态变化图形。

​ Mozilla 程序从 Gecko 一.8 (Firefox 一.伍)开首辅助 <canvas>, Internet
Explorer 从IE9开始<canvas> 。Chrome和Opera 9+ 也支持 <canvas>;

初识canvas–矩形绘制,初识canvas–矩形

一、canvas简介

​ <canvas>【金沙注册送58】的中央用法,矩形绘制。 是 HTML5 新添的,叁个可以运用脚本(平时为JavaScript金沙注册送58 ,)在里头绘制图像的 HTML 元素。它能够用来创造照片集恐怕制作简单(也不是那么粗略)的卡通片,以至足以拓展实时摄像拍卖和渲染。


它最初由苹果内部使用自个儿MacOS X WebKit出产,供应用程序使用像仪表盘的预制构件和 Safari 浏览器选择。
后来,有人通过Gecko基本的浏览器
(特别是MozillaFirefox),OperaChrome和超文本网络使用技工组建议为下一代的网络才能利用该因素。

​ Canvas是由HTML代码合作高度宽度品质而定义出的可绘制区域。JavaScript代码能够访问该区域,类似于任何通用的2维API,通过一套完整的绘图函数来动态变化图形。

Mozilla 程序从 Gecko 1.8 (Firefox 1.5)发端援助 <canvas>,
Internet Explorer 从IE9开始<canvas> 。ChromeOpera 9+ 也支持<canvas>

一、<canvas>元素

2、Canvas基本选取

一、canvas简介

​ <canvas> 是 HTML5 新添的,叁个足以利用脚本(平常为JavaScript)在内部绘制图像的 HTML 成分。它能够用来构建照片集大概制作轻巧(也不是那么粗略)的卡通,以致足以开始展览实时摄像拍卖和渲染。


它最初由苹果内部采取自个儿MacOS X WebKit推出,供应用程序使用像仪表盘的构件和 Safari 浏览器接纳。
后来,有人透过Gecko水源的浏览器
(特别是MozillaFirefox),OperaChrome和超文本网络接纳技工组提出为后辈的互连网技能运用该因素。

​ Canvas是由HTML代码协作中度和幅度属性而定义出的可绘制区域。JavaScript代码能够访问该区域,类似于此外通用的二维API,通过一套完整的绘图函数来动态变化图形。

​ Mozilla 程序从 Gecko 一.八 (Firefox 一.伍)开头帮忙 <canvas>, Internet
Explorer 从IE9开始<canvas> 。Chrome和Opera 9+ 也支持 <canvas>;

二、Canvas基本使用

1、<canvas>写法:

<canvas id="mycanvas" width="500" height="500">您的浏览器不支持canvas</canvas>

 <canvas>元素

<canvas id="tutorial" width="300" height="300"></canvas>

 

​ <canvas>看起来和<img>标签同样,只是 <canvas> 唯有四个可选的属性 width、heigth 属性,而没有 src、alt 属性。


要是不给<canvas>设置widht、height属性时,则默认 width为300、height为150,单位都以px。也足以应用css品质来安装宽高,不过如宽高属性和开头比例不一致等,他会油但是生扭曲。所以,提出长久不要接纳css天性来安装<canvas>的宽高。

贰、Canvas基本使用

2.1 <canvas>元素

<canvas id="tutorial" width="300" height="300"></canvas>

<canvas>看起来和<img>标签同样,只是 <canvas> 唯有四个可选的属性 width、height 属性,而没有 src、alt 属性。

​ 假若不给<canvas>设置widht、height属性时,则默认 width为300、height为150,单位都以px。也能够运用css性格来设置宽高,不过如宽高属性和开始比例分化,他会产出扭曲。所以,提议永世不要采纳css属性来安装<canvas>的宽高。

2、<canvas>宽高设置

在使用<canvas>成分时务必设置宽度和可观,钦定可以描绘的区域大小,但是宽高设置有1个留意的主题素材

样例代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            canvas{
                border:5px solid red;
            }
        </style>
    </head>
    <body>
        <canvas id="mycanvas" width="500" height="500"></canvas>
    </body>
    <script type="text/javascript">
        var canvas = document.getElementById("mycanvas");
        var context = canvas.getContext("2d");
        context.beginPath();
        context.strokeRect(0, 0, 100, 100);
        context.fillRect(101, 0, 100, 100);
        context.stroke();
        context.fill();
    </script>
</html>

在此地大家直接在<canvas>标签内设置了画画区域的深浅,在浏览器中显得的功用是那般的

金沙注册送58 1

图片.png

壹旦大家用常规CSS设置宽高的话

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            canvas{
                width:500px;
                height:500px;
                border:5px solid red;
            }
        </style>
    </head>
    <body>
        <canvas id="mycanvas"></canvas>
    </body>
    <script type="text/javascript">
        var canvas = document.getElementById("mycanvas");
        var context = canvas.getContext("2d");
        context.beginPath();
        context.strokeRect(0, 0, 100, 100);
        context.fillRect(101, 0, 100, 100);
        context.stroke();
        context.fill();
    </script>
</html>

此刻浏览器中显得的效劳就是那样

金沙注册送58 2

图片.png

分明是宽高同样的矩形,为啥会并发拉长的效益呢?
  其实<canvas>有协和暗中认可的宽高300px*150px,而且在<canvas>行间样式定义width、height跟在style中定义width、height是有所不一样的:<canvas>标签的width和height是<canvas>在浏览器中被渲染的惊人和宽度。假如<canvas>的width和height没内定也许值不得法,就棉被服装置成暗中认可值{width:300px;height:150px};
  那就分解了干吗第两种写法导致图形被拉伸,原因是画画区域的深浅未有在<canvas>行间样式中定义,所以被默认为宽高的暗中认可值,而<style>中设置为{width:500px;height:500px;}将美术区域的冲天拉伸了。

轮换内容


由于有个别较老的浏览器(尤其是IE玖在此之前的IE浏览器)可能浏览器不协助HTML成分<canvas>,在这几个浏览器上您应当总是能展现代表内容。


支持<canvas>的浏览器会只渲染<canvas>标签,而忽视在那之中的代表内容。不辅助 <canvas> 的浏览器则
会直接渲染代替内容。

1.用文件替换

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

2.用img替换

<canvas>
    <img src="./美女.jpg" alt="金沙注册送58 3"> 
</canvas>

 

 <canvas>元素

<canvas id="tutorial" width="300" height="300"></canvas>

 

​ <canvas>看起来和<img>标签一样,只是 <canvas> 唯有八个可选的属性 width、heigth 属性,而没有 src、alt 属性。


要是不给<canvas>设置widht、height属性时,则默认 width为300、height为150,单位都以px。也能够选择css天性来安装宽高,可是如宽高属性和始发比例不均等,他会出现扭曲。所以,建议永恒不要接纳css属性来设置<canvas>的宽高。

壹、替换内容


由于有些较老的浏览器(越发是IE玖以前的IE浏览器)只怕浏览器不援助HTML成分<canvas>,在那些浏览器上您应当总是能显得代表内容。


支持<canvas>的浏览器会只渲染<canvas>标签,而忽视在这之中的代表内容。不帮忙 <canvas> 的浏览器则
会直接渲染代替内容。

(1)用文本替换:

1 <canvas>
2     你的浏览器不支持canvas,请升级你的浏览器
3 </canvas>

(2)用 <img> 替换:

1 <canvas>
2     <img src="./美女.jpg" alt="金沙注册送58 4"> 
3 </canvas>

三、<canvas>的浏览器援救

<canvas id="mycanvas" width="500" height="500">您的浏览器不支持canvas</canvas>

或多或少较老的浏览器(越发是IE九此前的IE浏览器)不协助<canvas>成分,在那几个浏览器上,就能够显得大家的升迁“您的浏览器不协理canvas”,因为大家在<canvas>标签中提供了交替内容。帮忙<canvas>的浏览器将会忽视标签中的提示内容,并且健康的渲染canvas

三 渲染上下文(Thre Rending Context)

​ <canvas>会创设四个固定大小的画布,会当着叁个或多少个 渲染上下文(画笔),使用 渲染上下文来绘制和拍卖要显得的源委。

​ 大家最主要研商 贰D渲染上下文。 别的的上下文大家暂不商量,举例,
WebGL使用了基于OpenGL ES的3D上下文 (“experimental-webgl”) 。

var canvas = document.getElementById('tutorial');
//获得 2d 上下文对象
var ctx = canvas.getContext('2d');

 

二 检查实验扶助性

var canvas = document.getElementById('tutorial');

if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

代码模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas矩形绘制</title>
</head>
<body>
    <canvas id="tutorial" width="300" height="300"></canvas>
    <script type="text/javascript">
        function draw() {
            var canvas = document.getElementById('tutorial');
            if(!canvas.getContext) return;
            var ctx = canvas.getContext('2d');

        }
        draw();
    </script>
</body>
</html>

 

 

肆.绘制矩形

一,  绘制3个填写的矩形

1 fillRect(x, y, width, height) 

// 绘制一个背景色为rgb(200,0,0),原点为10,30 宽为55,高为55的矩形
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect(10,30,55,50);

 

2.绘制叁个矩形的边框

1 strockRect(x, y, width, height) 

// 绘制一个,原点为9,149 宽为82,高为的矩形边框
ctx.strokeRect(9,149,82,82);

 

 

3.   清除钦定的矩形

clearRect(x, y, widh, height) 

 

轮换内容


由于一些较老的浏览器(特别是IE九此前的IE浏览器)大概浏览器不补助HTML成分<canvas>,在那些浏览器上你应当总是能突显代表内容。


支持<canvas>的浏览器会只渲染<canvas>标签,而忽略个中的代替内容。不扶助 <canvas> 的浏览器则
会直接渲染代替内容。

1.用文件替换

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

2.用img替换

<canvas>
    <img src="./美女.jpg" alt="金沙注册送58 5"> 
</canvas>

 

利落标签</canvas>不可省

与 <img>要素分裂,<canvas>元素需要得了标签(</canvas>)。假使得了标签不设有,则文书档案的其他部分会被感到是代表内容,将不会议及展览示出来。

二、渲染上下文

<canvas>成分成立了三个稳住大小的画布,它公开了3个或多少个喧嚷上下文,其能够用来绘制和管理要出示的剧情,这里我们将贰d渲染上下文。
  canvas开首是空白的,私下认可背景象是晶莹剔透的。大家在绘制以前,首先脚本必要找到渲染上下文,<canvas>成分有二个叫作getContext()的办法来获得渲染上下文和它的描绘作用,getContext()唯有三个参数,上下文的格式,这里对于二d图像来讲,能够在<script>中运用

//获取canvas的DOM对象
var canvas  =document.getElementById("mycanvas");
//获得渲染上下文
var context = canvas.getContext("2d");

三 渲染上下文(Thre Rending Context)

​ <canvas>会创制多个长久大小的画布,会当着一个或四个 渲染上下文(画笔),使用 渲染上下文来绘制和拍卖要显得的源委。

​ 大家根本切磋 二D渲染上下文。 别的的上下文大家暂不切磋,举个例子,
WebGL使用了依附OpenGL ES的3D上下文 (“experimental-webgl”) 。

var canvas = document.getElementById('tutorial');
//获得 2d 上下文对象
var ctx = canvas.getContext('2d');

 

2 检查评定援救性

var canvas = document.getElementById('tutorial');

if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

代码模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas矩形绘制</title>
</head>
<body>
    <canvas id="tutorial" width="300" height="300"></canvas>
    <script type="text/javascript">
        function draw() {
            var canvas = document.getElementById('tutorial');
            if(!canvas.getContext) return;
            var ctx = canvas.getContext('2d');

        }
        draw();
    </script>
</body>
</html>

 

 

④.绘制矩形

一,  绘制一个填写的矩形

1 fillRect(x, y, width, height) 

// 绘制一个背景色为rgb(200,0,0),原点为10,30 宽为55,高为55的矩形
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect(10,30,55,50);

 

2.绘制2个矩形的边框

1 strockRect(x, y, width, height) 

// 绘制一个,原点为9,149 宽为82,高为的矩形边框
ctx.strokeRect(9,149,82,82);

 

 

叁.   清除钦点的矩形

clearRect(x, y, widh, height) 

 

一、canvas简要介绍 ​ canvas 是 HTML5 新扩大的,一个足以利用脚本(平日为
JavaScript )在内部绘制图像的 HTML 元…

2.二 渲染上下文(Thre Rending Context)

​ <canvas>会创制3个原则性大小的画布,会当面一个或多个 渲染上下文(画笔),使用 渲染上下文来绘制和拍卖要出示的原委。

​ 大家任重(英文名:rèn zhòng)而道远研讨 2D渲染上下文。
别的的上下文大家暂不钻探,比方, WebGL使用了基于OpenGL ES的3D上下文
(“experimental-webgl”) 。

1 var canvas = document.getElementById('tutorial');
2  //获得 2d 上下文对象
3 3var ctx = canvas.getContext('2d');

贰.叁 质量评定支持性

1 var canvas = document.getElementById('tutorial');
2 
3 if (canvas.getContext){
4   var ctx = canvas.getContext('2d');
5   // drawing code here
6 } else {
7   // canvas-unsupported code here
8 }

二.肆 代码模板

 1 <html>
 2 <head>
 3     <title>Canvas tutorial</title>
 4     <style type="text/css">
 5         canvas {
 6             border: 1px solid black;
 7         }
 8     </style>
 9 </head>
10 <canvas id="tutorial" width="300" height="300"></canvas>
11 </body>
12 <script type="text/javascript">
13     function draw(){
14         var canvas = document.getElementById('tutorial');
15         if(!canvas.getContext) return;
16         var ctx = canvas.getContext("2d");
17         //开始代码
18 
19     }
20     draw();
21 </script>
22 </html>

二.伍 五个归纳的例证

绘图多少个长方形。

<html>
<head>
    <title>Canvas tutorial</title>
    <style type="text/css">
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<canvas id="tutorial" width="300" height="300"></canvas>
</body>
<script type="text/javascript">
    function draw(){
        var canvas = document.getElementById('tutorial');
        if(!canvas.getContext) return;
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "rgb(200,0,0)";
        //绘制矩形
        ctx.fillRect (10, 10, 55, 50);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
    }
    draw();
</script>
</html>

三、绘制形状

3.1 栅格(grid)和坐标空间


如下图所示,canvas要素暗许被网格所掩盖。平日来讲网格中的一个单元也就是canvas要素中的一像素。栅格的起源为左上角(坐标为(0,0))。全部因素的职位都相对于原点来定位。所以图樱草黄色方形左上角的坐标为离开左侧(X轴)x像素,距离下面(Y轴)y像素(坐标为(x,y))。

​ 前面大家会涉嫌到坐标原点的运动、网格的旋转以及缩放等。

金沙注册送58 6

三.二 绘制矩形

​ <canvas> 只辅助一种原生的
图形绘制:矩形。全数其余图形都至少供给生成1种渠道(path)。可是,大家具有广大路线生成的章程让复杂图形的绘图成为了只怕。

canvast 提供了二种办法绘制矩形:

  1. fillRect(x, y, width, height)

    绘图3个填写的矩形

  2. strockRect(x, y, width, height)

    制图贰个矩形的边框

  3. clearRect(x, y, widh, height)

    打消费物价指数定的矩形区域,然后那块区域会变的完全透明。

说明:

​ 那三个方法具备同样的参数。

​ x, y:指的是矩形的左上角的坐标。(相对于canvas的坐标原点)

​ width, height:指的是绘制的矩形的宽和高。

1 function draw(){
2     var canvas = document.getElementById('tutorial');
3     if(!canvas.getContext) return;
4     var ctx = canvas.getContext("2d");
5     ctx.fillRect(10, 10, 100, 50);  //绘制矩形,填充的默认颜色为黑色
6     ctx.strokeRect(10, 70, 100, 50);  //绘制矩形边框
7 
8 }
9 draw();

金沙注册送58 7

ctx.clearRect(15, 15, 50, 25);

金沙注册送58 8

四、绘制路线(path)

​ 图形的主干成分是路径。

​ 路径是经过区别颜色和幅度的线条或曲线相连产生的不相同造型的点的汇集。

​ 3个门道,以至二个子路径,都是密闭的。

使用路线绘制图形须要某些额外的步调:

  1. 创造路线先导点
  2. 调用绘制方法去绘制出路线
  3. 把路子封闭
  4. 1经路线生成,通过描边或填充路线区域来渲染图形。

下边是亟需使用的不二等秘书籍:

  1. beginPath()

    新建一条路径,路径1旦创制成功,图形绘制命令被针对到路线上生成路线

  2. moveTo(x, y)

    把画笔移动到钦点的坐标(x, y)。也正是设置路线的开始点坐标。

  3. closePath()

    关掉路线之后,图形绘制命令又再次指向到上下文中

  4. stroke()

    透过线条来绘制图形轮廓

  5. fill()

    通过填写路线的剧情区域转换实心的图样

四.一 绘制线段

 1 function draw(){
 2     var canvas = document.getElementById('tutorial');
 3     if (!canvas.getContext) return;
 4     var ctx = canvas.getContext("2d");
 5     ctx.beginPath(); //新建一条path
 6     ctx.moveTo(50, 50); //把画笔移动到指定的坐标
 7     ctx.lineTo(200, 50);  //绘制一条从当前位置到指定坐标(200, 50)的直线.
 8     //闭合路径。会拉一条从当前点到path起始点的直线。如果当前点与起始点重合,则什么都不做
 9     ctx.closePath();
10     ctx.stroke(); //绘制路径。
11 }
12 draw();

肆.二 绘制三角形边框

 1 function draw(){
 2     var canvas = document.getElementById('tutorial');
 3     if (!canvas.getContext) return;
 4     var ctx = canvas.getContext("2d");
 5     ctx.beginPath();
 6     ctx.moveTo(50, 50);
 7     ctx.lineTo(200, 50);
 8     ctx.lineTo(200, 200);
 9     ctx.closePath(); //虽然我们只绘制了两条线段,但是closePath会closePath,仍然是一个3角形
10     ctx.stroke(); //描边。stroke不会自动closePath()
11 }
12 draw();

金沙注册送58 9

肆.三 填充三角形

 1 function draw(){
 2     var canvas = document.getElementById('tutorial');
 3     if (!canvas.getContext) return;
 4     var ctx = canvas.getContext("2d");
 5     ctx.beginPath();
 6     ctx.moveTo(50, 50);
 7     ctx.lineTo(200, 50);
 8     ctx.lineTo(200, 200);
 9 
10     ctx.fill(); //填充闭合区域。如果path没有闭合,则fill()会自动闭合路径。
11 }
12 draw();

金沙注册送58 10

四.4 绘制圆弧

有五个章程能够绘制圆弧:

  1. arc(x, y, r, startAngle, endAngle, anticlockwise):

    (x, y)为圆心,以r为半径,从 startAngle弧度起始到endAngle弧度结束。anticlosewise是布尔值,true意味着逆时针,false代表顺时针。(默许是顺时针)

    注意:

    1. 此处的度数都是弧度。
    2. 0弧度是指的x轴正方形

    radians=(Math.PI/180)*degrees   //角度转换成弧度
    
    • 1
  2. arcTo(x1, y1, x2, y2, radius):

    依据给定的调节点和半径画壹段圆弧,最终再以直线连接三个调整点。

圆弧案例一:

1 function draw(){
2     var canvas = document.getElementById('tutorial');
3     if (!canvas.getContext) return;
4     var ctx = canvas.getContext("2d");
5     ctx.beginPath();
6     ctx.arc(50, 50, 40, 0, Math.PI / 2, false);
7     ctx.stroke();
8 }
9 draw();

金沙注册送58 11

圆弧案例二:

 1 function draw(){
 2     var canvas = document.getElementById('tutorial');
 3     if (!canvas.getContext) return;
 4     var ctx = canvas.getContext("2d");
 5     ctx.beginPath();
 6     ctx.arc(50, 50, 40, 0, Math.PI / 2, false);
 7     ctx.stroke();
 8 
 9     ctx.beginPath();
10     ctx.arc(150, 50, 40, 0, -Math.PI / 2, true);
11     ctx.closePath();
12     ctx.stroke();
13 
14     ctx.beginPath();
15     ctx.arc(50, 150, 40, -Math.PI / 2, Math.PI / 2, false);
16     ctx.fill();
17 
18     ctx.beginPath();
19     ctx.arc(150, 150, 40, 0, Math.PI, false);
20     ctx.fill();
21 
22 }
23 draw();

金沙注册送58 12

圆弧案例三:

 1 function draw(){
 2     var canvas = document.getElementById('tutorial');
 3     if (!canvas.getContext) return;
 4     var ctx = canvas.getContext("2d");
 5     ctx.beginPath();
 6     ctx.moveTo(50, 50);
 7     //参数1、2:控制点1坐标   参数3、4:控制点2坐标  参数4:圆弧半径
 8     ctx.arcTo(200, 50, 200, 200, 100);
 9     ctx.lineTo(200, 200)
10     ctx.stroke();
11 
12     ctx.beginPath();
13     ctx.rect(50, 50, 10, 10);
14     ctx.rect(200, 50, 10, 10)
15     ctx.rect(200, 200, 10, 10)
16     ctx.fill()
17 }
18 draw();

金沙注册送58 13

arcTo办法的辨证:

​ 那些方式能够那样精通。绘制的半圆形是由两条切线所调整。

​ 第 1 条切线:开头点和垄断点①决定的直线。

​ 第 二 条切线:调节点一 和垄断点二决定的直线。

​ 实则绘制的弧形便是与那两条直线相切的拱形。

四.5 绘制贝塞尔曲线

四.五.一 什么是贝塞尔曲线

​ 贝塞尔曲线(Bézier
curve),又称贝兹曲线或贝济埃曲线,是选择于二维图形应用程序的数学曲线。


一般的矢量图形软件通过它来规范画出曲线,贝兹曲线由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋,我们在绘图工具上阅览的钢笔工具就是来做那种矢量曲线的。


贝塞尔曲线是Computer图形学中一定关键的参数曲线,在一些相比成熟的位图软件中也有贝塞尔曲线工具如PhotoShop等。在Flash4中还未曾完全的曲线工具,而在Flash5里面已经提供出贝塞尔曲线工具。

​ 贝塞尔曲线于一九6二,由法国程序员Pierre·贝塞尔(PierreBézier)所科学普及公布,他选择贝塞尔曲线来为汽车的主脑实行规划。贝塞尔曲线最初由Paulde Casteljau于一九5八年利用de
Casteljau演算法开辟,以安静数值的法门求出贝兹曲线。

二遍贝塞尔曲线(线性贝塞尔曲线)

​ 三回贝塞尔曲线其实是一条直线。

金沙注册送58 14

一次贝塞尔曲线

金沙注册送58 15金沙注册送58 16

1回贝塞尔曲线

金沙注册送58 17金沙注册送58 18

四.伍.2 绘制贝塞尔曲线

绘制壹遍贝塞尔曲线

quadraticCurveTo(cp1x, cp1y, x, y):

说明:

​ 参数壹和二:调整点坐标

​ 参数三和四:结束点坐标

 1 function draw(){
 2     var canvas = document.getElementById('tutorial');
 3     if (!canvas.getContext) return;
 4     var ctx = canvas.getContext("2d");
 5     ctx.beginPath();
 6     ctx.moveTo(10, 200); //起始点
 7     var cp1x = 40, cp1y = 100;  //控制点
 8     var x = 200, y = 200; // 结束点
 9     //绘制二次贝塞尔曲线
10     ctx.quadraticCurveTo(cp1x, cp1y, x, y);
11     ctx.stroke();
12 
13     ctx.beginPath();
14     ctx.rect(10, 200, 10, 10);
15     ctx.rect(cp1x, cp1y, 10, 10);
16     ctx.rect(x, y, 10, 10);
17     ctx.fill();
18 
19 }
20 draw();

金沙注册送58 19

绘制三遍贝塞尔曲线

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

说明:

​ 参数1和2:控制点1的坐标

​ 参数3和4:控制点2的坐标

​ 参数伍和6:甘休点的坐标

 1 function draw(){
 2     var canvas = document.getElementById('tutorial');
 3     if (!canvas.getContext) return;
 4     var ctx = canvas.getContext("2d");
 5     ctx.beginPath();
 6     ctx.moveTo(40, 200); //起始点
 7     var cp1x = 20, cp1y = 100;  //控制点1
 8     var cp2x = 100, cp2y = 120;  //控制点2
 9     var x = 200, y = 200; // 结束点
10     //绘制二次贝塞尔曲线
11     ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
12     ctx.stroke();
13 
14     ctx.beginPath();
15     ctx.rect(40, 200, 10, 10);
16     ctx.rect(cp1x, cp1y, 10, 10);
17     ctx.rect(cp2x, cp2y, 10, 10);
18     ctx.rect(x, y, 10, 10);
19     ctx.fill();
20 
21 }
22 draw();

金沙注册送58 20

 

相关文章

网站地图xml地图