HTML5在canvas中绘图繁杂样子附实际效果截图

日期:2021-02-25 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

1、绘图繁杂样子或相对路径

在简易的矩形框不可以考虑要求的状况下,制图自然环境出示了以下方式来绘图繁杂的样子或相对路径。

beginPath() : 刚开始绘图1个新相对路径。
closePath() : 根据绘图1条当今点到相对路径起始点的直线来闭合样子。
fill() , stroke() : 填充样子或绘图空心样子。
moveTo() : 将当今点挪动到点(x,y)。
lineTo() : 从当今点绘图1条平行线到点(x,y)。
arc(x,y,r,sAngle,eAngle,counterclockwise) : 绘图1条特定半径的弧到点(x,y)。

2、用这些方式绘图繁杂样子需遵照下列流程

应用beginPath()方式刚开始绘图相对路径。
应用moveTo()、lineTo()、arc()、方式建立直线。
应用closePath()完毕绘图并闭合样子(可选)。
应用stroke()或fill()绘图相对路径的外边框或填充样子。应用fill()会全自动闭合全部未闭合相对路径。

3、弧arc()绘图表明
 
 
4、在canvas中绘图繁杂样子

拷贝编码
编码以下:

<!--<!DOCTYPE> 申明务必是 HTML 文本文档的第1行,坐落于 <html> 标识以前。-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset = utf⑻">
<title>HTML5</title>
<script type="text/javascript" charset = "utf⑻">
//这个涵数将在网页页面彻底载入后启用
function pageLoaded()
{
//获得canvas目标的引入,留意tCanvas姓名务必和下面body里边的id同样
var canvas = document.getElementById('tCanvas');
//获得该canvas的2D制图自然环境
var context = canvas.getContext('2d');
//绘图编码将出現在这里
//绘图繁杂性猪
//填充3角形
context.beginPath();
context.moveTo(10,120);//从(10,20刚开始)
context.lineTo(10,180);//表明从(10,120)刚开始,画到(10,180)完毕
context.lineTo(110,150);//表明从(10,180)刚开始,画到(110,150)完毕
context.fill();//闭合样子而且以填充方法绘图出来
//3角形的外边框
context.beginPath();
context.moveTo(140,160);//从点(140,160)刚开始
context.lineTo(140,220);
context.lineTo(40,190);
context.closePath(); //关掉相对路径
context.stroke(); //以空心填充
//1个繁杂的多边形
context.beginPath();
context.moveTo(160,160);//从点(160,160)刚开始
context.lineTo(170,220);
context.lineTo(240,210);
context.lineTo(260,170);
context.lineTo(190,140);
context.closePath();
context.stroke();
//绘图弧
//绘图半圆弧
context.beginPath();
//在(100,300)处逆时针画1个半径为40,角度从0到180°的弧线
context.arc(100,300,40,0*Math.PI,1*Math.PI,true); //PI的弧度是180°
context.stroke();
//画1个实心圆
context.beginPath();
//在(100,300)处逆时针画1个半径为30,角度为0到360°的弧
context.arc(100,300,30,0*Math.PI,2*Math.PI,true);//2*Math.PI是360°
context.fill();
//画1个3/4弧
context.beginPath();
//在(200,300)处顺时针画1个半径为25,角度为0到270°的弧
context.arc(200,300,25,0*Math.PI,3/2*Math.PI,false);
context.stroke();
}
</script>
</head>
<body onload="pageLoaded();">
<canvas width = "400" height = "400" id = "tCanvas" style = "border:black 1px solid;">
<!--假如访问器不适用则显示信息以下字体样式-->
提醒:你的访问器不适用<canvas>标识
</canvas>
</body>
</html>

5、绘图实际效果
上一篇:24个canvas基本专业知识小结 返回下一篇:没有了