html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
使用HTML5Canvas绘制直线或折线等线条的方法讲解
使⽤HTML5Canvas绘制直线或折线等线条的⽅法讲解HTML5 Canvas基本概念讲解html5，这个应该就不需要多作介绍了，只要是开发⼈员应该都不会陌⽣。
html5是「新兴」的⽹页技术标准，⽬前，除IE8及其以下版本的IE浏览器之外，⼏乎所有主流浏览器(FireFox、Chrome、Opera、Safari、IE9+)都已经开始⽀持html5了。
除此之外，在移动浏览器市场上，众多的移动浏览器也纷纷展开关于「html5的⽀持能⼒以及性能表现」的军备竞赛。
html作为⾰命性的⽹页技术标准，再加上众多浏览器⼚商或组织的⿍⼒⽀持，可以想见，html5将会成为未来⽹页技术的领头⽺。
html5，说其是「新兴」的，其实也不算新了。
毕竟，html5早在2008年其第⼀份正式草案就已经对外公布。
从2008年算起，到现在也算是有些年头了。
不过，到⽬前为⽌，对于⼤多数开发⼈员⽽⾔，仍然是「雷声⼤，⾬点⼩」——听说html5的多，实际使⽤html5的却很少。
众所周知，html5中增加了许多新特性。
在html5的众多特性中，Canvas应该算是最引⼈注⽬的新特性之⼀。
我们使⽤html5的Canvas对象可以直接在浏览器的⽹页上绘制图形。
这意味着浏览器可以脱离Flash等第三⽅插件，直接在⽹页上显⽰图形或动画。
现在，我们就来为html5初学者介绍如何使⽤html5 Canvas绘制基本的图形。
⾸先，我们需要准备如下html基础代码：XML/HTML Code复制内容到剪贴板1. <!DOCTYPE html>2. <html>3. <head>4. <meta charset="UTF-8">5. <title>HTML5 Canvas⼊门⽰例</title>6. </head>7. <body>8.9. </body>10. </html>上述代码是⼀个html5页⾯的基本代码模板。
canvas三次贝塞尔曲线绘制工具方法
canvas三次贝塞尔曲线绘制工具方法Canvas是HTML5提供的绘图API，它可以使用JavaScript来绘制图形、渲染图像以及创建动画效果。
Canvas中可以使用贝塞尔曲线（Bezier Curve）来绘制平滑的曲线。
贝塞尔曲线有三次贝塞尔曲线（Cubic Bezier Curve）和二次贝塞尔曲线（Quadratic Bezier Curve）两种形式，而本文将重点介绍三次贝塞尔曲线的绘制工具方法。
在Canvas中绘制三次贝塞尔曲线需要使用到以下几个重要的属性和方法：1. `beginPath()`：开始一个新的路径。
2. `moveTo(x, y)`：把路径移动到画布中的指定点(x, y)，不创建线条。
3. `bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)`：创建三次贝塞尔曲线。
其中，`cp1x`和`cp1y`是控制点1的坐标，`cp2x`和`cp2y`是控制点2的坐标，`x`和`y`是结束点的坐标。
4. `stroke()`：绘制路径的边框。
5. `fill()`：填充路径的内容。
接下来，我们将通过一个实际的例子来演示如何使用Canvas绘制三次贝塞尔曲线。
假设我们要绘制一个圆形的脸部，可以使用三次贝塞尔曲线来绘制圆形的轮廓。
具体步骤如下：1.首先，在Canvas上创建一个圆形脸部的轮廓：```javascriptconst canvas = document.getElementById('canvas');const ctx = canvas.getContext('2d');ctx.beginPath();ctx.arc(200, 200, 150, 0, 2 * Math.PI); //使用arc方法绘制圆形轮廓ctx.stroke(); //绘制轮廓的边框```2.接下来，在圆形脸部的基础上，通过三次贝塞尔曲线绘制眼睛的轮廓：```javascriptctx.beginPath();ctx.moveTo(120, 160); //移动到左眼位置ctx.bezierCurveTo(120, 100, 280, 100, 280, 160); //使用bezierCurveTo方法绘制眼睛ctx.stroke();```3.紧接着，通过三次贝塞尔曲线绘制嘴巴的轮廓：```javascriptctx.beginPath();ctx.moveTo(150, 240); //移动到嘴巴的起始位置ctx.bezierCurveTo(170, 320, 230, 320, 250, 240); //使用bezierCurveTo方法绘制嘴巴ctx.stroke();```通过以上三步的操作，我们就成功绘制了一个使用三次贝塞尔曲线绘制的圆形脸部，其中包含眼睛和嘴巴的轮廓。
HTML5Canvas学习笔记（canvas绘制线条、矩形、多边形、圆、自定义图像）
HTML5Canvas学习笔记（canvas绘制线条、矩形、多边形、圆、⾃定义图像）⼀、对 canvas 的理解 <canvas>标签是 HTML5 中的新标签，像所有的 dom 对象⼀样它有⾃⼰本⾝的属性、⽅法和事件。
canvas 是⽤来在⽹页上绘制图形的（我们通常称之为画布），canvas 只是图形容器，需要使⽤ js 脚本来绘制图形，可以绘制线条、矩形、多边形、圆形、圆环、组合图形、⽂字、⾃定义图像等。
浏览器⽀持注释：Internet Explorer 8 以及更早的版本不⽀持 <canvas> 标签。
Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari ⽀持 <canvas>标签。
⼆、基本⽅法绘图环境： 语法 Canvas.getContext(contextID) 参数contextID指定了您想要在画布上绘制的类型。
当前唯⼀的合法值是 "2d"，它指定了⼆维绘图，并且导致这个⽅法返回⼀个环境对象，该对象导出⼀个⼆维绘图API。
【注】：getContext() ⽅法返回⼀个⽤于在画布上绘图的环境。
getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的⽅法。
绘制图形样式style（⼀般在绘制图形前先进⾏样式设定）：context.fillStyle //填充样式context.strokeStyle //笔触颜⾊context.lineWidth //边框宽度绘制图像有两种⽅法：context.fill() //填充context.stroke() //绘制边框颜⾊的表⽰⽅式:颜⾊名称:"red" "green" "blue"⼗六进制颜⾊值: "#FFFFFF"三⾊值：rgb(1-255,1-255,1-255)四⾊值：rgba(1-255,1-255,1-255,透明度)三、使⽤ <canvas> Step1: ⾸先在html页⾯中添加<canvas>标签，规定好画布的id和尺⼨，代码如下：<!--规定了canvas元素的id名称为canvas、宽度为400px、⾼度为300px--><canvas id="myCanvas" width="400" height="300"/> Step2: 通过JavaScript来进⾏绘制： ⽅法⼀：<!--⽤⾕歌浏览器，获取canvas对象时需要先加载对象，所以要把该段代码放到body中，在js⽂件⾥进⾏绘制图像--><script src="canvas.js"></script> ⽅法⼆：<!--或者直接在body⾥编写代码--><script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.fillStyle = "#FF0000"; context.fillRect(50,50,150,100);</script> 图解： Step3: Step2 分步骤： 通过id来捕获canvas元素 创建 context 对象 指定 fillStyle 填充颜⾊为红⾊指定 fillRect ：fillRect(起始点x轴坐标, 始点y轴坐标, 宽度, ⾼度);四、实例1--绘制线条： context.moveTo(x,y) context.lineTo(x,y)x:x坐标y:y坐标起点 moveTo 的点到终点 lineTo 的点之间画⼀条直线如果没有moveTo那么第⼀次lineTo的效果和moveTo⼀样每次lineTo后如果没有moveTo，那么下次lineTo的开始点为前⼀次lineTo的结束点1 1 // 绘制对⾓线2 2 function demo1(id){3 3 var canvas = document.getElementById(id);4 4 var context = canvas.getContext("2d");5 5 6 6 context.strokeStyle = "#ff0000";7 78 8 context.moveTo(0,0);9 9 context.lineTo(200,100);10 10 context.stroke();11 11 }View Code实例结果：1// 绘制直⾓三⾓形2function demo1(id){3var canvas = document.getElementById(id);4 var context = canvas.getContext("2d");5 6 context.strokeStyle = "#ff0000";78 context.lineTo(20, 20);9 context.lineTo(20, 70);10 context.lineTo(70, 70);11 context.lineTo(20, 20);12 context.stroke();13 }View Code【注】：1. 三⾓形有三个点，但在连线的时候还需要连回顶点；2. 最后⼀定记得加上 stroke(); 初学时容易犯这个⽑病，这相当于你把点定好了，却没⽤线连起来，岂不......实例结果：CSS属性中有⼀圆⾓设置 radius，canvas画线段也要达到这种圆⾓匾额效果，我么也有相应的办法： lineJoin 属性,可以设置线的交汇处的样式，lineJoin有3个属性值：miter(尖⾓，默认)，bevel（斜⾓）,round（圆⾓） lineCap 属性，定义线条的端点。
详解HTML5canvas绘图基本使用方法
详解HTML5canvas绘图基本使⽤⽅法<canvas></canvas>是HTML5中新增的标签，⽤于绘制图形，实际上，这个标签和其他的标签⼀样，其特殊之处在于该标签可以获取⼀个CanvasRenderingContext2D对象，我们可以通过JavaScript脚本来控制该对象进⾏绘图。
<canvas></canvas>只是⼀个绘制图形的容器，除了id、class、style等属性外，还有height和width属性。
在<canvas>>元素上绘图主要有三步：1. 获取<canvas>元素对应的DOM对象，这是⼀个Canvas对象；2. 调⽤Canvas对象的getContext()⽅法，得到⼀个CanvasRenderingContext2D对象；3. 调⽤CanvasRenderingContext2D对象进⾏绘图。
绘制线段moveTo()和lineTo()以下是⼀个简单的<canvas>绘图⽰例：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvas绘图演⽰</title><style type="text/css">#canvas{border: 1px solid #ADACB0;display: block;margin: 20px auto;}</style></head><body><canvas id="canvas" width="300" height="300">你的浏览器还不⽀持canvas</canvas></body><script type="text/javascript">var canvas = document.getElementById("canvas");var context = canvas.getContext("2d");//设置对象起始点和终点context.moveTo(10,10);context.lineTo(200,200);//设置样式context.lineWidth = 2;context.strokeStyle = "#F5270B";//绘制context.stroke();</script></html>如果没有通过moveTo()特别指定，lineTo()的起始点是以上⼀个点为准。
HTML5 Canvas 属性、定义及方法
摘自《HTML5高级程序设计》《HTML5揭秘》一、简单图形，整套的属性和方法专门用于绘制矩形：1、fillStyle可以设置为CSS颜色、一个图案或一种颜色渐变。
fillStyle默认是纯黑色，你可以设置成你喜欢的任意颜色。
只要页面打开着，每个绘图上下文都会记录自己的属性，除非你重置过它。
2、fillRect(x,y,width,height)绘制一个矩形，并以当前的fillStyle来填充。
3、srtokeStyle和fillStyle一样，可以设置为CSS颜色、一个图案或一种颜色渐变。
4、strokeRect（x,y,width,height）使用当前的storke style来绘制一个矩形，strokeRect并不填充中间区域，而只绘制矩形的边缘。
5、clearRect(x,y,width,height)清除指定矩形区域的像素。
二、路径按照惯例，不论开始绘制何种图形，第一个需要调用的就是beginPath。
这个简单的函数不带任何参数，它用来通知canvas将要开始绘制一个新的图形了。
对于canvas来说，beginPath函数最大的用处是canvas需要据此来计算图形的内部和外部的范围，以便完成后续的描边和填充。
路径会跟踪当前坐标，默认值是原点。
canvas本身也跟踪当前坐标，不过可能通过绘制代码来修改。
每一个canvas都有一个路径，定义路径就如同用铅笔作画。
你可以任意作地画，但它不一定是最终作品的一部分，直到你拿起画笔沾上墨水描绘这条路径。
moveTo(x,y)：不绘制，只是将当前位置移动到新目标坐标（x,y），并作为线条开始点。
lineTo(x,y)：绘制线条到指定的目标坐标(x,y)，并且在两个坐标之间画一条直线。
不管调用它们哪一个，都不会真正画出图形，因为我们还没有主，调用stroke（绘制）和fil（填充）函数。
当前，只是在定义路径的位置，以便后面绘制时使用。
closePath()，这个函数跟lineTo很像，唯一的差别在于closePath会将路径的起始坐标自动作为目标坐标。
HTML5之Canvas绘图——使用Canvas绘制图形的基本教程
HTML5之Canvas绘图——使⽤Canvas绘制图形的基本教程HTML5⽕的正热，最近有个想法也是要⽤到HTML的相关功能，所以也要好好学习⼀把。
好好看了⼀下Canvas的功能，感觉HTML5在客户端交互的功能性越来越强了，今天看了⼀下Canvas绘图，下边是⼏个实例，记下以备后⽤。
1、使⽤Canvas绘制直线：<!doctype html><html><head><meta charset="UTF-8"></head><style type="text/css">canvas{border:dashed 2px #CCC}</style><script type="text/javascript">function $$(id){return document.getElementById(id);}function pageLoad(){var can = $$('can');var cans = can.getContext('2d');cans.moveTo(20,30);//第⼀个起点cans.lineTo(120,90);//第⼆个点cans.lineTo(220,60);//第三个点（以第⼆个点为起点）cans.lineWidth=3;cans.strokeStyle = 'red';cans.stroke();}</script><body onload="pageLoad();"><canvas id="can" width="400px" height="300px">4</canvas></body></html>这⾥⽤到的两个API⽅法，moveTo和lineTo分别是线段的起点和终点坐标，变量为（X坐标,Y坐标）,strokeStyle、stroke分别路径绘制样式和绘制路径。
H5的canvas绘图技术
H5的canvas绘图技术canvas元素是HTML5中新添加的一个元素，该元素是HTML5中的一个亮点。
Canvas元素就像一块画布，通过该元素自带的API结合JavaScript代码可以绘制各种图形和图像以及动画效果。
1.1 浏览器不兼容问题•ie9以上才支持canvas, 其他chrome、firefox、苹果浏览器等都支持•只要浏览器兼容canvas，那么就会支持绝大部分api(个别最新api除外)•移动端的兼容情况非常理想，基本上随便使用• 2d的支持的都非常好，3d（webgl）ie11才支持，其他都支持•如果浏览器不兼容，最好进行友好提示，提示内容只有在浏览器不支持时才显示。
//例如：<canvas id="cavsElem">你的浏览器不支持canvas，请升级浏览器</canvas>浏览器不兼容，也可以使用flash等手段进行优雅降级1.2 创建画布在页面中创建canvas元素与创建其他元素一样，只需要添加一个<canvas>标记即可。
该元素默认的宽高为300*15，可以通过元素的width属性和height属性改变默认的宽高。
注意：•不能使用CSS样式控制canvas元素的宽高，否则会导致绘制的图形拉伸。
•重新设置canvas标签的宽高属性会导致画布擦除所有的内容。
•可以给canvas画布设置背景色1.3 canvas坐标系在开始绘制任何图像之前，我们先讲一下canvas的坐标系。
canvas坐标系是以左上角0,0处为坐标原点，水平方向为x轴，向右为正；垂直方向为y轴，向下为正。
如下图所示：1.4 绘制线径1.获取上下文对象(CanvasRenderingContext2D)首先，获取canvas元素，然后调用元素的getContext(“2d”)方法，该方法返回一个CanvasRenderingContext2D对象，使用该对象就可以在画布上绘图了。
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
}
draw();
// ctx.strokeRect(100,100,50,50);
</script
</html
提示：您可以先修改部分代码再运行
我们由moveTo确定的起点和quadraticCurveTo自身确定的终点，可以连接成一条直线，由于quadraticCurveTo只有一个控制点，这个控制点不是在直线左边，就是在直线右边，所以，quadraticCurveTo永远只能画弧线，还是画不出S形。
为了便于理解，我还是沿用上一篇文章的画辅助线的方法。初步代码如下：
y1 = 250,
x2 = 440,
 பைடு நூலகம்y2 = 550,
x = 400,
y = 500;
var fan = 1,fan1 = 1;
function draw () {
ctx.clearRect(100,100,600,600);
</body
<script type=“text/javascript”
var cvs = document.getElementById(‘cvs’); //画布
var ctx = cvs.getContext(‘2d’); //画笔
// ctx.closePath();
var x1=350,
ctx.stroke();
ctx.beginPath();
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
继续讲canvas中画曲线的方法，今天讲quadraticCurveTo。
说实话这个方法有点吓人，单从函数名称上都可以初体验。
话说，我觉得有必要把这个函数名缩短。
quadratic的意思是二次，即数学中二次元方程那个二次。
而ctx.quadraticCurveTo的参数如下：
代码如下:
ctx.quadraticCurveTo(x1,y1,x,y);
其中x,y是终点的坐标，而x1,y1是曲线控制点的坐标？什么？你问我起点在哪里？起点在此之前用moveTo确定。
我之所以把控制点的坐标带上序号1，是因为后面讲的某个画曲线的函数有两个控制点，也就有x2,y2了，所以这里先打个预防针。
我们由moveTo确定的起点和quadraticCurveTo自身确定的终点，可以连接成一条直线，由于quadraticCurveTo只有一个控制点，这个控制点不是在直线左边，就是在直线右边，所以，quadraticCurveTo永远只能画弧线，还是画不出S形。
为了便于理解，我还是沿用上一篇文章的画辅助线的方法。
初步代码如下：
代码如下:
var x1=350,
y1 = 250,
x = 400,
y = 500;
ctx.beginPath();
ctx.strokeStyle="#000";
ctx.moveTo(300,300); //起点
ctx.quadraticCurveTo(x1,y1,x,y); //正牌曲线
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "rgba(255,0,0,0.5)";
ctx.moveTo(300,300);
ctx.lineTo(x1,y1);//本行与下一行是画控制点的线
ctx.lineTo(x,y);
ctx.moveTo(300,300);//开始连接曲线的起点和终点
ctx.lineTo(x,y);
ctx.stroke();
这里我画了两条辅助线，一条是起点与终点的连接线，一条是起点到控制点再到终点的辅助线（其实是两条），这两条线的交汇点就是quadraticCurveTo的控制点坐标。
quadraticCurveTo也只能画弧形的曲线，不过这个弧形可以很不规则，相比arc和arcTo，也算是一个进步了。
另外，quadraticCurveTo也不会像arcTo一样，出现反转的情况。
当然，如果你把控制点拉得非常远，可能图形也会变得让你不认识。
我们来试一下：
“y1 = 950;
”我只是把y1改大了一些，然后曲线就超出canvas的范围了。
不过，quadraticCurveTo画出的曲线的范围，永远无法达到或超过控制点的坐标，我们只有把控制点“控制”好，就不用担心了。
我写了一个简单的可以动的示例页，展示了quadraticCurveTo画曲线的过程，希望能帮你加深理解：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Canvas学习--quadraticCurveTo画曲线</title>
<style type="text/css">
canvas {box-shadow: 0 0 10px rgba(0,0,0,0.2) }
</style>
</head>
<body>
<canvas id="cvs" width="800" height="600">不支持canvas</canvas>
</body>
<script type="text/javascript">
var cvs = document.getElementById('cvs'); //画布
var ctx = cvs.getContext('2d'); // 画笔
// ctx.closePath();
var x1=350,
y1 = 250,
x2 = 440,
y2 = 550,
x = 400,
y = 500;
var fan = 1,fan1 = 1;
function draw () {
ctx.clearRect(100,100,600,600);
ctx.beginPath();
ctx.strokeStyle="#000";
ctx.moveTo(300,300);
ctx.quadraticCurveTo(x1,y1,x,y);
ctx.stroke();
/*ctx.beginPath();
ctx.strokeStyle = "rgba(0,255,0,1)"
ctx.moveTo(300,300);
ctx.bezierCurveTo(x1,y1,x2,y2,x,y);
ctx.stroke();*/
ctx.beginPath();
ctx.strokeStyle = "rgba(255,0,0,0.5)";
ctx.moveTo(300,300);
ctx.lineTo(x1,y1);
// ctx.lineTo(x2,y2);
ctx.lineTo(x,y);
ctx.moveTo(300,300);
ctx.lineTo(x,y);
/*ctx.moveTo(x2,y2);
ctx.lineTo(x,y);*/
ctx.stroke();
if(x1 > 600) {
fan = -1;
} else if (x1 < 200) {
fan = 1;
}
if(y1 > 700) {
fan1 = -1;
} else if (y1 < 200) {
fan1 = 1;
}
x1 += fan;
y1 += fan1;
setTimeout(draw,22);
}
draw();
// ctx.strokeRect(100,100,50,50);
</script>
</html>
提示：您可以先修改部分代码再运行。