HTML5中Canvas绘图各种基本图形的方法_html-js-css

概述"canvas是html5的一部分，当然他们说的H5也并不是html5的意思，只是表示在手机浏览器中，更侠义的是在微信浏览器中打开的酷炫的网页。

下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。内存溢出小编现在分享给大家，也给大家做个参考。

canvas 是 HTML5 的一部分，当然他们说的 H5 也并不是 HTML5 的意思，只是表示在手机浏览器中，更侠义的是在微信浏览器中打开的酷炫的网页。曾几何时，我也觉得 canvas 真的酷爆了，各种什么烟花、酷炫的动画效果、canvas 游戏等，都燃烧着我学习的热情。后来通过学习，多看书，其实 canvas 并不复杂，要用到的东西也不多，大概整理一下：

1、绘制直线：

代码预览

<HTML>

<head>

</head>

canvas{border:dashed 2px #CCC}

</style>

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>

</HTML>

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

2、渐变线条

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

代码预览

<HTML>

<head>

</head>

canvas{border:dashed 2px #CCC}

</style>

function $$(ID){

return document.getElementByID(ID);

}

function pageLoad(){

var can = $$('can');

var cans = can.getContext('2d');

cans.moveto(0,0);

cans.lineto(400,300);

var gnt1 = cans.createlinearGradIEnt(0,400,300);//线性渐变的起止坐标

gnt1.addcolorStop(0,'red');//创建渐变的开始颜色，0表示偏移量，个人理解为直线上的相对位置，最大为1，一个渐变中可以写任意个渐变颜色

gnt1.addcolorStop(1,'yellow');

cans.linewidth=3;

cans.strokeStyle = gnt1;

cans.stroke();

}

</script>

</body>

</HTML>

3、矩形或正方形：

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

代码预览

<HTML>

<head>

</head>

canvas{border:dashed 2px #CCC}

</style>

function $$(ID){

return document.getElementByID(ID);

}

function pageLoad(){

var can = $$('can');

var cans = can.getContext('2d');

cans.fillStyle = 'yellow';

cans.fillRect(30,30,340,240);

}

</script>

</body>

</HTML>

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

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

4、简单矩形框

代码预览

<HTML>

<head>

</head>

canvas{border:dashed 2px #CCC}

</style>

function $$(ID){

return document.getElementByID(ID);

}

function pageLoad(){

var can = $$('can');

var cans = can.getContext('2d');

cans.strokeStyle = 'red';

cans.strokeRect(30,240);

}

</script>

</body>

</HTML>

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

5、线性渐变矩形

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

代码预览

<HTML>

<head>

</head>

canvas{border:dashed 2px #CCC}

</style>

function $$(ID){

return document.getElementByID(ID);

}

function pageLoad(){

var can = $$('can');

var cans = can.getContext('2d');

var gnt1 = cans.createlinearGradIEnt(10,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>

</HTML>

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

6、填充圆形

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

代码预览

<HTML>

<head>

</head>

canvas{border:dashed 2px #CCC}

</style>

function $$(ID){

return document.getElementByID(ID);

}

function pageLoad(){

var can = $$('can');

var cans = can.getContext('2d');

cans.beginPath();

cans.arc(200,150,100,Math.PI*2,true);

cans.closePath();

cans.fillStyle = 'green';//本来这里最初使用的是red，截图一看，傻眼了，怕上街被爱国者打啊，其实你懂的~~

cans.fill();

}

</script>

</body>

</HTML>

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

8、圆形渐变

代码预览

<HTML>

<head>

</head>

canvas{border:dashed 2px #CCC}

</style>

function $$(ID){

return document.getElementByID(ID);

}

function pageLoad(){

var can = $$('can');

var cans = can.getContext('2d');

var gnt = cans.createradialGradIEnt(200,300,50,200,200);

gnt.addcolorStop(1,'red');

gnt.addcolorStop(0,'green');

cans.fillStyle = gnt;

cans.fillRect(0,800,600);

}

</script>

</body>

</HTML>

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

9、立体圆

代码预览

<HTML>

<head>

</head>

canvas{border:dashed 2px #CCC}

</style>

function $$(ID){

return document.getElementByID(ID);

}

function pageLoad(){

var can = $$('can');

var cans = can.getContext('2d');

cans.beginPath();

cans.arc(200,true);

cans.closePath();

var gnt = cans.createradialGradIEnt(200,250);

gnt.addcolorStop(0,'red');

gnt.addcolorStop(1,'#533');

cans.fillStyle =gnt;

cans.fill();

}

</script>

</body>

</HTML>

以上是内存溢出(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

总结

以上是内存溢出为你收集整理的HTML5中Canvas绘图各种基本图形的方法全部内容，希望文章能够帮你解决HTML5中Canvas绘图各种基本图形的方法所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1096027.html

HTML5中Canvas绘图各种基本图形的方法

发表评论

评论列表（0条）