HTML5的Canvas实现绘制曲线的方法（html5 canvas绘图）

25-03-04 11

本文将分享HTML5的Canvas实现绘制曲线的方法的详细内容，并且还将对html5canvas绘图进行详尽解释，此外，我们还将为大家带来关于Canvas教程(2)：HTML5的Canvas概述、H5

本文将分享HTML5的Canvas实现绘制曲线的方法的详细内容，并且还将对html5 canvas绘图进行详尽解释，此外，我们还将为大家带来关于Canvas教程(2)：HTML5的Canvas概述、H5的Canvas如何实现绘制音乐环形频谱图、HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程使用html5 canvas 绘制精美的图_html5教程技巧、HTML5 Canvas中实现绘制一个像素宽的细线的相关知识，希望对你有所帮助。

本文目录一览：

HTML5的Canvas实现绘制曲线的方法（html5 canvas绘图）
Canvas教程(2)：HTML5的Canvas概述
H5的Canvas如何实现绘制音乐环形频谱图
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程使用html5 canvas 绘制精美的图_html5教程技巧
HTML5 Canvas中实现绘制一个像素宽的细线

HTML5的Canvas实现绘制曲线的方法（html5 canvas绘图）

这篇文章主要介绍了使用HTML5的Canvas绘制曲线的简单方法,是HTML5入门学习中的基础知识,需要的朋友可以参考下

Canvas2D自带的曲线方法
　　最近在研究3D柔体的计算，所以在狂补一些知识。经常会涉及到一些数值分析方面的东西，主要是曲线的各种插值算法。突然想起了Canvas2D本身也是可以绘制曲线的，使用的是二次和三次的贝兹曲线。其实我也一直没用它的过这个方法，现在就来试试吧～
　　这篇只是说说简单的曲线绘制，咱就不说一大堆复杂的原理了。况且贝兹曲线这东西的原理本身很简单，看看维基百科就能明白。其实很多绘图工具中的简单曲线绘制都是使用贝兹曲线的，如果你用过windows自带绘图工具中的曲线就一定不陌生。可以先拖出一条直线，然后点击某个位置让直线扭曲。一开始的拖动动作就是决定曲线的两个顶点，点击动作就是添加中间点。在windows自带的绘图工具使用的是三次贝兹曲线，你可以添加两个中间点。贝兹曲线和一般的多项式插值不同，它的中间点只是作为控制点用的，并不是曲线必须经过的

顶点。而且它还可以做出闭曲线。Canvas2D中有提供两个绘制曲线的方法
　　　　quadraticCurveto：二次贝兹曲线
　　　　bezierCurveto：三次贝兹曲线
　　线条是从当前所在位置开始画的，可以用moveto方法来指定当前位置。有了曲线的开始位置后，还需要中间点和结束位置。把这些位置坐标传给绘制函数即可。比如二次贝兹曲线需要一个中间点和一个结束位置，所以要传两个坐标给quadraticCurveto函数。坐标是由x和y组成的，也就是说这个函数有4个参数。bezierCurveto也是一样的，只是它有两个中间点而已。下面咱就来用用看

<canvas id=canvas width=200 height=200></canvas>   
<script>   
var g=canvas.getContext(2d);   
//普通的直线   
g.beginPath();   
g.strokeStyle=#CCC;   
g.moveto(0,0);   
g.lineto(200,0);   
g.lineto(0,200);   
g.lineto(200,200);   
g.stroke();   
//贝兹曲线   
g.beginPath();   
g.strokeStyle=#F00;   
g.moveto(0,0);   
g.bezierCurveto(200,0, 0,200, 200,200);   
g.stroke();   
</script>

这个按照Z字形的轨迹给定四个点，画出了普通的直线和贝兹曲线。这只是普通的曲线而已，贝兹曲线的厉害之处是它可以画出闭曲线，比如这样一段代码

g.beginPath();   
g.strokeStyle=#00F;   
g.moveto(100,0);   
g.bezierCurveto(-100,200, 300,200, 100,0);   
g.stroke();

把三次贝兹曲线的开始位置和结束位置设置到同一点上就可以画出闭曲线。因为贝兹曲线的插值方向不是按照坐标轴走的，所以可以绘制出闭曲线。如果想让多项式插值绘制出闭曲线我们就得转换参数，使用极坐标系来完成。
　　我使用的例子都是三次贝兹曲线。其实二次的也一样，只是少了个中间点就画不出我想要的东西了。我就不再啰嗦一大堆了，这篇就这样吧= =。。

Canvas教程(2)：HTML5的Canvas概述

<canvas>是一个新的HTML元素，这个元素可以被Script语言(通常是JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做简单的(和不那么简单的)动画。右面的图象展示了一些<canvas>的应用示例，我们将会在此教程中看到他们的实现。

<canvas>最先在苹果公司(Apple)的Mac OS X Dashboard上被引入，而后被应用于Safari。基于Gecko1.8的浏览器，例如Firefox 1.5，也支持这个新元素。元素<canvas>是WhatWG Web applications 1.0也就是大家都知道的HTML 5标准规范的一部分。

在本教程中，我将试着讲述如何在你自己的网页中使用<canvas>元素。提供的示例应该会给你些清晰概念，即用<canvas>能做些什么的。这些示例也可作为你应用<canvas>的起点。
开始使用之前

用元素<canvas>并不难，只要你具有HTML和 JavaScript的基础知识。

如上所述，并不是所有现代浏览器都支持
<canvas>
元素，所以你需要 Firefox 1.5或更新版本、或者其他基于Gecko的浏览器例如Opera 9、或者最近版本的Safari才能看到所有示例的动作。

1.Canvas 是甚么？

下面网址可以找到html5 Canvas的完整定义
http://www.whatwg.org/specs/web-apps/current-work/#the-canvas

现在Firefox 2，safari 都直接支持Canvas,IE 需要一个ExCanvas 的js代码库转换。

下面网址可以找到 ExCanvas[此js库尚未提供对arcto()，clip()的支持，因此基于其上的各种chart组件天然的不能生成pie图]
http://excanvas.sourceforge.net/

Mozilla的Canvas入门
http://developer.mozilla.org/en/docs/Category:HTML:Canvas

Mininova的Canvas入门
http://labs.mininova.org/canvas/

2.Canvas 能做甚么？

(1)Msx模拟器

It emulates the underlying Z80 CPU, TMS9918 Video Display Processor (VDP), PPI, RAM slots and Megaram. In its present form, it should be able to run any program or game developed for MSX 1.0.

用js模拟Z80等硬件,读取rom信息，无声游戏
http://jsmsxdemo.googlepages.com/jsmsx.html

(2)Painter
假如性能允许，发展成Web photo也是可能的事情。
http://caimansys.com/painter/index.html

(3)效果
水波纹
http://timelessname.com/canvas/experiment01/
某个模糊理论视觉模型
http://timelessname.com/canvas/experiment02/

(4)3D

多面体
http://www.polyhedra.org/poly/

3D地图
Mozilla的例子，RayCaster 就是一个。

Canvascape - 3D walker，比上面例子更完善些，还提供纹理贴图功能
一个类似CS的界面
http://www.abrahamjoffe.com.au/ben/canvascape/

(5)chart组件

成形的有 WebFx Chart,Flot等，需要可自行搜索。

3.Canvas 的发展

(1)Canvas代码转换到flash(porting canvas to flash)
http://team.mixmedia.com/index.php?title=porting_canvas_to_flash&more=1&c=1&tb=1&pb=1
(2)支持Canvas的框架

mootools支持Canvas 的调用，并有一个mocha的基于mootools的组件提供一个窗体功能。

H5的Canvas如何实现绘制音乐环形频谱图

这次给大家带来h5的canvas如何实现绘制音乐环形频谱图，h5canvas实现绘制音乐环形频谱图的注意事项有哪些，下面就是实战案例，一起来看一下。

在B站我们有很多的小伙伴们应该都看到过用AE做的可视化音乐播放器播放音乐的视频,看着特别酷炫带感有木有。

所以今天我就用 Canvas 做个简单环形频谱图。

那么~ ヾ(ｏ･ω･)ﾉ开始吧！

1.首先绘制静态的效果

静态效果

绘制静态效果很简单,我们只要从一点出发根据一定角度绘制线条,然后画个圆从中点开始覆盖线条就行了

<canvas id="wrap" height="800" width="800"></canvas><script>
    var wrap = document.getElementById("wrap");    var cxt = wrap.getContext("2d");
    (function drawSpectrum() {
        cxt.clearRect(0, 0, wrap.width, wrap.height);        //画线条
        for (var i = 0; i < 360; i++) {            var value = 8;
            cxt.beginPath();
            cxt.lineWidth = 2;
            cxt.moveTo(300, 300);             //R * cos (PI/180*一次旋转的角度数) ,-R * sin (PI/180*一次旋转的角度数)
            cxt.lineTo(Math.cos((i * 1) / 180 * Math.PI) * (200 + value) + 300, (- Math.sin((i * 1) / 180 * Math.PI) * (200 + value) + 300));
            cxt.stroke();
        }        //画一个小圆，将线条覆盖
        cxt.beginPath();
        cxt.lineWidth = 1;
        cxt.arc(300, 300, 200, 0, 2 * Math.PI, false); 
        cxt.fill;
        cxt.stroke();
        cxt.fill(); 
    })();</script>

登录后复制

2.调用AudioAPI,绘制音乐的频谱图

绘制音乐的频谱图

第一步完成后，第二步就很简单了,通过调用AudioAPI获取音频变化来改变线条长度。

注意！！！最新chrome浏览器可能需要在http服务器上运行~

你可以参考文章绘制音乐的频谱图（使用Analyser节点）

<input type="button" onclick="audio.play()" value="播放" /><input type="button" onclick="audio.pause()" value="暂停" /><canvas id="wrap" height="800" width="800"></canvas><script> 
    var wrap = document.getElementById("wrap");    var cxt = wrap.getContext("2d");    //获取API
    var AudioContext = AudioContext || webkitAudioContext;    var context = new AudioContext;    //加载媒体
    var audio = new Audio("demo.mp3");    //创建节点
    var source = context.createMediaElementSource(audio);    var analyser = context.createAnalyser();    //连接：source → analyser → destination
    source.connect(analyser);
    analyser.connect(context.destination);    //创建数据
    var output = new Uint8Array(360);
    (function drawSpectrum() {
        analyser.getByteFrequencyData(output);//获取频域数据
        cxt.clearRect(0, 0, wrap.width, wrap.height);        //画线条
        for (var i = 0; i < 360; i++) {            var value = output[i] / 8;//<===获取数据
            cxt.beginPath();
            cxt.lineWidth = 2;
            cxt.moveTo(300, 300);            //R * cos (PI/180*一次旋转的角度数) ,-R * sin (PI/180*一次旋转的角度数)
            cxt.lineTo(Math.cos((i * 1) / 180 * Math.PI) * (200 + value) + 300, (- Math.sin((i * 1) / 180 * Math.PI) * (200 + value) + 300));
            cxt.stroke();
        }        //画一个小圆，将线条覆盖
        cxt.beginPath();
        cxt.lineWidth = 1;
        cxt.arc(300, 300, 200, 0, 2 * Math.PI, false);
        cxt.fill;
        cxt.stroke();
        cxt.fill();        //请求下一帧
        requestAnimationFrame(drawSpectrum);
    })();</script>

登录后复制

3.环形左右同步显示

实习步骤2后其实已经完成一大半了,不过细心的小伙伴们会发现环形最右端点上的线条间差了好多。

处理办法很多,我们用其中一个简单的办法处理,那就是让其左右对称的显示。

<input type="button" onclick="audio.play()" value="播放" /><input type="button" onclick="audio.pause()" value="暂停" /><canvas id="wrap" height="550" width="800"></canvas><script> 
    var wrap = document.getElementById("wrap");    var cxt = wrap.getContext("2d");    //获取API
    var AudioContext = AudioContext || webkitAudioContext;    var context = new AudioContext;    //加载媒体
    var audio = new Audio("demo.mp3");    //创建节点
    var source = context.createMediaElementSource(audio);    var analyser = context.createAnalyser();    //连接：source → analyser → destination
    source.connect(analyser);
    analyser.connect(context.destination);    //创建数据
    var output = new Uint8Array(361);
    (function drawSpectrum() {
        analyser.getByteFrequencyData(output);//获取频域数据
        cxt.clearRect(0, 0, wrap.width, wrap.height);        //画线条
        for (var i = 0; i < output.length; i++) {            var value = output[i] / 10;            //绘制左半边
            cxt.beginPath();
            cxt.lineWidth = 1;
            cxt.moveTo(300, 300);
            cxt.lineTo(Math.cos((i *0.5 + 90) / 180 * Math.PI) * (200 + value) + 300, (- Math.sin((i *0.5 + 90) / 180 * Math.PI) * (200 + value) + 300));
            cxt.stroke();            //绘制右半边
            cxt.beginPath();
            cxt.lineWidth = 1;
            cxt.moveTo(300, 300);
            cxt.lineTo( (Math.sin((i *0.5) / 180 * Math.PI) * (200 + value) + 300),-Math.cos((i *0.5) / 180 * Math.PI) * (200 + value) + 300);
            cxt.stroke();
        }        //画一个小圆，将线条覆盖
        cxt.beginPath();
        cxt.lineWidth = 1;
        cxt.arc(300, 300, 200, 0, 2 * Math.PI, false);
        cxt.fill;
        cxt.stroke();
        cxt.fill();        //请求下一帧
        requestAnimationFrame(drawSpectrum);
    })();</script>

登录后复制

4.添加波形图

最后我们来尝试在圈内,添加一个波形图

你可以参考文章绘制音乐的波形图（使用Analyser节点）

示例

<input type="button" onclick="audio.play()" value="播放" /><input type="button" onclick="audio.pause()" value="暂停" /><canvas id="wrap" height="550" width="800"></canvas><script> 
    var wrap = document.getElementById("wrap");    var cxt = wrap.getContext("2d");    //获取API
    var AudioContext = AudioContext || webkitAudioContext;    var context = new AudioContext;    //加载媒体
    var audio = new Audio("demo.mp3");    //创建节点
    var source = context.createMediaElementSource(audio);    var analyser = context.createAnalyser();    //连接：source → analyser → destination
    source.connect(analyser);
    analyser.connect(context.destination);    //创建数据
    var output = new Uint8Array(361);    //计算出采样频率44100所需的缓冲区长度
    var length = analyser.frequencyBinCount * 44100 / context.sampleRate | 0;    //创建数据 
    var output2 = new Uint8Array(length);
    (function drawSpectrum() {
        analyser.getByteFrequencyData(output);//获取频域数据
        cxt.clearRect(0, 0, wrap.width, wrap.height);        //画线条
        for (var i = 0; i < output.length; i++) {            var value = output[i] / 10;            //绘制左半边
            cxt.beginPath();
            cxt.lineWidth = 1;
            cxt.moveTo(300, 300);
            cxt.lineTo(Math.cos((i * 0.5 + 90) / 180 * Math.PI) * (200 + value) + 300, (- Math.sin((i * 0.5 + 90) / 180 * Math.PI) * (200 + value) + 300));
            cxt.stroke();            //绘制右半边
            cxt.beginPath();
            cxt.lineWidth = 1;
            cxt.moveTo(300, 300);
            cxt.lineTo((Math.sin((i * 0.5) / 180 * Math.PI) * (200 + value) + 300), -Math.cos((i * 0.5) / 180 * Math.PI) * (200 + value) + 300);
            cxt.stroke();
        }        //画一个小圆，将线条覆盖
        cxt.beginPath();
        cxt.lineWidth = 1;
        cxt.arc(300, 300, 200, 0, 2 * Math.PI, false);
        cxt.fill;
        cxt.stroke();
        cxt.fill();        //将缓冲区的数据绘制到Canvas上 
        analyser.getByteTimeDomainData(output2);        var height = 100, width = 400;
        cxt.beginPath();        for (var i = 0; i < width; i++) {
            cxt.lineTo(i + 100, 300 - (height / 2 * (output2[output2.length * i / width | 0] / 256 - 0.5)));
        }
        cxt.stroke();        //请求下一帧
        requestAnimationFrame(drawSpectrum);
    })();</script>

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关阅读：

如何使用canvas来制作好用的涂鸦画板

如何使用s-xlsx实现Excel 文件导入和导出（下）

以上就是H5的Canvas如何实现绘制音乐环形频谱图的详细内容，更多请关注php中文网其它相关文章！

HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程使用html5 canvas 绘制精美的图_html5教程技巧

html5火的正热，最近有个想法也是要用到html的相关功能，所以也要好好学习一把。

好好看了一下Canvas的功能，感觉HTML5在客户端交互的功能性越来越强了，今天看了一下Canvas绘图，下边是几个实例，记下以备后用。

1、使用Canvas绘制直线：

XML/HTML Code复制内容到剪贴板

nbsp;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 cancans = 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">4canvas>
body>
html>

这里用到的两个API方法，moveTo和lineTo分别是线段的起点和终点坐标，变量为（X坐标,Y坐标）,strokeStyle、stroke分别路径绘制样式和绘制路径。

立即学习“前端免费学习笔记（深入）”；

2、绘制渐变线条

渐变线条就是颜色有渐变的效果，当然渐变的样式可以遵循路径的方向也可以不遵循路径的方向：

XML/HTML Code复制内容到剪贴板

nbsp;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 cancans = can.getContext(''2d'');
cans.moveTo(0,0);
cans.lineTo(400,300);
var gnt1 = cans.createLinearGradient(0,0,400,300);//线性渐变的起止坐标
gnt1.addColorStop(0,''red'');//创建渐变的开始颜色，0表示偏移量，个人理解为直线上的相对位置，最大为1，一个渐变中可以写任意个渐变颜色
gnt1.addColorStop(1,''yellow'');
cans.lineWidth=3;
cans.strokeStyle = gnt1;
cans.stroke();
}
script>
body onload="pageLoad();">
canvas id="can" width="400px" height="300px">4canvas>
body>
html>

3、绘制矩形或正方形：

这种矩形框如果使用HTML4只能使用后台代码才能生成了，现在HTML5提供的Canvas功能却很容易就能绘制，所以说HTML5的优越性是相当高的。

XML/HTML Code复制内容到剪贴板

nbsp;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 cancans = can.getContext(''2d'');
cans.fillStyle = ''yellow'';
cans.fillRect(30,30,340,240);
}
script>
body onload="pageLoad();">
canvas id="can" width="400px" height="300px">4canvas>
body>
html>

这里使用了一个方法——fillRect（）从字面意思也能知道这个就是填充一个矩形，这里的参数值得说明一下fillRect(X,Y,Width,Height)，这个和数学里的坐标是不一样的，具体请看

这里的X，Y是相对Canvas左上角的起点开始的，谨记！！

4、绘制一个简单的矩形框

上例中讲到要绘制一个矩形块，填充了颜色，这个例子只是简单地绘制一个矩形而不实现填充效果。

XML/HTML Code复制内容到剪贴板

nbsp;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 cancans = can.getContext(''2d'');
cans.strokeStyle = ''red'';
cans.strokeRect(30,30,340,240);
}
script>
body onload="pageLoad();">
canvas id="can" width="400px" height="300px">4canvas>
body>
html>

这个很简单，和上例一样，就是将fill替换成了stroke，具体详见上例。

5、绘制一个线性渐变的矩形

渐变是填充的一种相当不错的效果，结合实例2和实例3，我们可以创建一个渐变的矩形

XML/HTML Code复制内容到剪贴板

nbsp;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 cancans = can.getContext(''2d'');
var gnt1 = cans.createLinearGradient(10,0,390,0);
gnt1.addColorStop(0,''red'');
gnt1.addColorStop(0.5,''green'');
gnt1.addColorStop(1,''blue'');
cans.fillStyle = gnt1;
cans.fillRect(10,10,380,280);
}
script>
body onload="pageLoad();">
canvas id="can" width="400px" height="300px">4canvas>
body>
html>

不解释了，记住fillRect（X,Y,Width,Height）就行了。

6、填充一个圆形

圆形的用途很广，当然也包含了椭圆。

XML/HTML Code复制内容到剪贴板

nbsp;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 cancans = can.getContext(''2d'');
cans.beginPath();
cans.arc(200,150,100,0,Math.PI*2,true);
cans.closePath();
cans.fillStyle = ''green'';//本来这里最初使用的是red，截图一看，傻眼了，怕上街被爱国者打啊，其实你懂的~~
cans.fill();
}
script>
body onload="pageLoad();">
canvas id="can" width="400px" height="300px">4canvas>
body>
html>

这里的arc方法的用法是 arc(X,Y,Radius,startAngle,endAngle,anticlockwise),意思是（圆心X坐标，圆心Y坐标，半径，开始角度（弧度），结束角度弧度，是否按照顺时针画）；

arc中各参数比较：

a、cans.arc(200,150,100,0,Math.PI,true);

c、cans.arc(200,150,100,0,Math.PI/2,true);

d、cans.arc(200,150,100,0,Math.PI/2,false);

7、圆形区块

XML/HTML Code复制内容到剪贴板

nbsp;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 cancans = can.getContext(''2d'');
cans.beginPath();
cans.arc(200,150,100,0,Math.PI*2,false);
cans.closePath();
cans.lineWidth = 5;
cans.strokeStyle = ''red'';
cans.stroke();
}
script>
body onload="pageLoad();">
canvas id="can" width="400px" height="300px">4canvas>
body>
html>

这里不解释了，和上边的例子相同，lineWidth是控制线条的宽度的。

8、圆形渐变

XML/HTML Code复制内容到剪贴板

nbsp;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 cancans = can.getContext(''2d'');
var gnt = cans.createRadialGradient(200,300,50,200,200,200);
gnt.addColorStop(1,''red'');
gnt.addColorStop(0,''green'');
cans.fillStyle = gnt;
cans.fillRect(0,0,800,600);
}
script>
body onload="pageLoad();">
canvas id="can" width="800px" height="600px">4canvas>
body>
html>

这里需要说明的是createRadialGradient方法，参数有（Xstart,Ystart,radiusStart,XEnd,YEnd,radiusEnd），也就是说，它在实行渐变时，使用了两个圆，一个是原始的圆，一个是渐变式圆，其实，这种通过坐标与半径控制的方式可以实现很多样式，比如

立体圆

XML/HTML Code复制内容到剪贴板

var gnt = cans.createRadialGradient(200,150,0,200,50,250);
gnt.addColorStop(0,''red'');
gnt.addColorStop(1,''#333'');

HTML5 Canvas中实现绘制一个像素宽的细线

正统的HTML5 Canvas中如下代码

ctx.linewidth = 1;
ctx.beginPath();
ctx.moveto(10,100);
ctx.lineto(300,100);
ctx.stroke();

运行结果绘制出来的并不是一个像素宽度的线

感觉怎么好粗啊，跟常常见到的网页版各种绘制线效果

很不一样，难道HTML5 Canvas就没想到搞好点嘛

其实这个根本原因在于Canvas的绘制不是从中间开始的

而是从0～1，不是从0.5～1 + 0～0.5的绘制方式，所以

导致fade在边缘，看上去线很宽。

解决方法有两个，一个是错位覆盖法，另外一种是中心

平移(0.5,0.5)。实现代码如下：

错位覆盖法我已经包装成一个原始context的函数

/**
 * <p> draw one pixel line </p>
 * @param fromX
 * @param formY
 * @param toX
 * @param toY
 * @param backgroundColor - default is white
 * @param vertical - boolean
 */
CanvasRenderingContext2D.prototype.onePixelLineto = function(fromX,fromY,toX,toY,backgroundColor,vertical) {
	var currentstrokeStyle = this.strokeStyle;
	this.beginPath();
	this.moveto(fromX,fromY);
	this.lineto(toX,toY);
	this.closePath();
	this.linewidth=2;
	this.stroke();
	this.beginPath();
	if(vertical) {
		this.moveto(fromX+1,fromY);
		this.lineto(toX+1,toY);
	} else {
		this.moveto(fromX,fromY+1);
		this.lineto(toX,toY+1);
	}
	this.closePath();
	this.linewidth=2;
	this.strokeStyle=backgroundColor;
	this.stroke();
	this.strokeStyle = currentstrokeStyle;
};

中心平移法代码如下：

ctx.save();
	ctx.translate(0.5,0.5);
	ctx.linewidth = 1;
	ctx.beginPath();
	ctx.moveto(10,100);
	ctx.lineto(300,100);
	ctx.stroke();
	ctx.restore();

要特别注意确保你的所有坐标点是整数，否则HTML5会自动实现边缘反锯齿

又导致你的一个像素直线看上去变粗了。

运行效果：

现在效果怎么样，这个就是HTML5 Canvas画线的一个小技巧

觉得不错请顶一下。

今天关于HTML5的Canvas实现绘制曲线的方法和html5 canvas绘图的讲解已经结束，谢谢您的阅读，如果想了解更多关于Canvas教程(2)：HTML5的Canvas概述、H5的Canvas如何实现绘制音乐环形频谱图、HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程使用html5 canvas 绘制精美的图_html5教程技巧、HTML5 Canvas中实现绘制一个像素宽的细线的相关知识，请在本站搜索。

本文标签：