LeinwandZeichnen eines rechteckigen Koordinatensystems
17. März 2017
Die Verwendung von Leinwand zum Zeichnen eines rechteckigen Koordinatensystems ist eigentlich recht einfach, solange der Ursprung ( 0, 0) Punkt, es können auch andere Punkte sein, solange man weiß, dass es der Ursprung ist! Sobald Sie den Ursprung kennen, zeichnen Sie einfach zwei gerade Linien in Richtung der X-Achse und der Y-Achse (die X-Achse und die Y-Achse sind ebenfalls relativ, dies hängt ausschließlich von Ihren persönlichen Vorlieben und tatsächlichen Bedürfnissen ab).
Schauen wir uns ohne weitere Umschweife einfach den Code an:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas画直角坐标系和柱状图</title>
</head>
<body>
<h1 id="canvas画直角坐标系及柱状图">canvas画直角坐标系及柱状图</h1>
<canvas id="canvas" width="600" height="400">如果您只看到了这句话，那么您的浏览器该升级换代了！</canvas>
<!--canvas的宽高即可以设置成行内样式，也可以通过Js设置，不过建议设置成行内样式-->
<script src="js/drawChart.js" type="text/javascript" charset="utf-8"></script>
<!--为了表现与样式分离同时为了页面简洁，引入一个外部js文件-->
<script type="text/javascript">
var canvas=document.getElementById("canvas");
var cxt = canvas.getContext("2d");
//通过id获取canvas画布，并获得cxt画笔，canvas目前只支持2d效果，所以“2d”不能省；
var arr = [16,15,20,21]//利用数组模拟柱状图的数据
Coordinate(50,350);//自己写的一个直角坐标系
ColumnChart1(50,350,arr); //一个简单的柱状图函数
/*为了有个简单的动画效果，canvas绘制完成以后先将它隐藏，然后用jQuery的slideDown（）方法淡入显示*/
$("#canvas").hide();
$("#canvas").slideDown(1000);
</script>
</body>
</html>Dann gibt es die Zeichenmethode des rechteckigen Koordinatensystems (wenn der Meister sieht, dass die Funktionen vollständiger sind und die Die Codemenge kann rationalisiert werden. Vielen Dank für Ihren Rat):
function Coordinate(x,y){
//x为横坐标起点，Y为纵坐标起点
var originX = x;
var originY = y;
//设置原点的那个文字的样式，并绘制出来
cxt.font = "2rem 微软雅黑";
cxt.fillText("0",originX-10,originY+15);//此处-10和+15是为了调整字的位置
cxt.strokeStyle = "black";//设置坐标系X轴Y轴的颜色，绘制线条用strockeStyle属性，绘制填充色块用fillStyle属性；
cxt.lineWidth = 3;//设置线条粗细，这里为了方便看设置了3个像素，可以根据情况自行调整
//开始绘制Y轴
cxt.beginPath();//开启路径
cxt.moveTo(originX,originY);//x轴与y轴的起点位置
cxt.lineTo(originX,originY-320);//轴的终点位置，即X大小不变，只是改变了Y点位置（根据实际情况做调整）；
cxt.stroke();//将这条线绘制出来
//画小箭头
cxt.moveTo(originX,originY-320);//小箭头起点位置即为Y轴终点位置
cxt.lineTo(originX+3,originY-310);//originX+3和originY-310是设置小箭头的终点位置，小箭头的大小和尖锐程度请自行摸索
cxt.stroke();
cxt.moveTo(originX,originY-320);
cxt.lineTo(originX-3,originY-310);
cxt.stroke();
//画横坐标
//绘制X轴和Y轴相似
cxt.moveTo(originX,originY);
cxt.lineTo(originX+450,originY);
cxt.stroke();
//画小箭头
cxt.moveTo(originX+450,originY);
cxt.lineTo(originX+440,originY-3);
cxt.stroke();
cxt.moveTo(originX+450,originY);
cxt.lineTo(originX+440,originY+3);
cxt.stroke();
cxt.fillText("Y轴",originX-5,originY-325)
}Dann gibt es die Methode zum Zeichnen des Balkendiagramms:
function ColumnChart1(x,y,arr){
//绘制之前先清空原有的柱状图所占区域
cxt.clearRect(x,y,500,0);
var arrColor = ["red","yellow","blue","purple","green","mauve"];//为了使每个柱子的颜色不一样，如果可以尽量用#******或rgb（）方法设置颜色，因为我这样直接用单词有些浏览器对个别颜色不识别（头疼的IE）
//请务必保持x，y值与坐标系的x，y值相同
this.arr= arr;
for (var i=0;i<arr.length;i++ ) {//for循环用来遍历数组内数据
if(i==0){
var originX = x+40;
var originY = y-1;
}else{
var originX = i*70+80;
var originY = y-1;
}
cxt.beginPath();
cxt.strokeStyle = arrColor[i];//设置线条颜色
cxt.lineWidth = 20;//这里为了方便直接将线条的宽度设置为20，这样就可以模拟柱子
cxt.moveTo(originX+(i+1)*20,originY);//柱子的顶点位置，这里因为数组内数字小，所以都乘十了，这样有利于小数字的表现
cxt.lineTo(originX+(i+1)*20,originY-(arr[i]*10));//调整每根柱子的间距；
cxt.stroke();
cxt.font = "20px 宋体"
cxt.fillText(arr[i],originX+(i+1)*20-10,originY-(arr[i]*10+3));
//文字的绘制
cxt.font = "13px 宋体"
cxt.fillText("第"+(i+1)+"季度业绩",originX+(i+1)*20-35,originY+20)
}
}Wenn Sie möchten, dass das Diagramm angezeigt wird Um schöner auszusehen, können Sie die von Canvas bereitgestellten Eigenschaften ShadowColor, ShadowOffsetX, ShadowOffsetY und andere verwandte Eigenschaften verwenden, um den Schatten festzulegen.
Zeichnen Sie gleichzeitig eine Ellipse mit einer etwas anderen Farbe als die Säule, wobei der Scheitelpunkt der Säule die Mitte bildet.
Das obige ist der detaillierte Inhalt vonCanvas zeichnet ein rechteckiges Koordinatensystem. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
H5 und HTML5: häufig verwendete Begriffe in der WebentwicklungApr 13, 2025 am 12:01 AMH5 und HTML5 beziehen sich auf dasselbe, nämlich HTML5. HTML5 ist die fünfte Version von HTML, die neue Funktionen wie semantische Tags, Multimedia -Support, Leinwand und Grafiken, Offline -Speicher und lokaler Speicher bietet, die Ausdrucksfähigkeit und Interaktivität von Webseiten verbessert.
Worauf bezieht sich H5? Erforschen des KontextesApr 12, 2025 am 12:03 AMH5REFERSTOHTML5, ApivotaltechnologyInwebdevelopment.1) HTML5IntroducesNewelementsandapisrich, Dynamicwebapplications.2) ITSUPP ortsmultimediaWitHoutPlugins, BETHINGINGUSEREXPERICERCROSSDEVICES.3) SEMANTICELEMENTSIMPROVEPENTENTENTENTRUCTENTRUCTELUREANDSEO.4) H5'SRespo
H5: Tools, Frameworks und Best PracticesApr 11, 2025 am 12:11 AMZu den Tools und Frameworks, die in der H5 -Entwicklung gemeistert werden müssen, gehören Vue.js, React und WebPack. 1.Vue.js eignet sich zum Erstellen von Benutzeroberflächen und unterstützt die Komponentenentwicklung. 2. Die Rendern des Seitenrenders über virtuelle DOM optimiert, geeignet für komplexe Anwendungen. 3.Webpack wird zur Modulverpackung und zur Optimierung der Ressourcenlast verwendet.
Das Erbe von HTML5: H5 in der Gegenwart verstehenApr 10, 2025 am 09:28 AMHTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee
H5 -Code: Zugänglichkeit und semantische HTMLApr 09, 2025 am 12:05 AMH5 verbessert die Zugänglichkeits- und SEO -Effekte der Webseiten durch semantische Elemente und Aria -Attribute. 1. Verwendung usw., um die Inhaltsstruktur zu organisieren und SEO zu verbessern. 2. ARIA-Attribute wie ARIA-Label verbessern die Zugänglichkeit, und assistive Technologie-Benutzer können Webseiten reibungslos verwenden.
Ist H5 gleich wie HTML5?Apr 08, 2025 am 12:16 AM"H5" und "HTML5" sind in den meisten Fällen gleich, haben jedoch möglicherweise unterschiedliche Bedeutungen in bestimmten Szenarien. 1. "HTML5" ist ein W3C-definierter Standard, der neue Tags und APIs enthält. 2. "H5" ist normalerweise die Abkürzung von HTML5, kann jedoch in der mobilen Entwicklung auf ein auf HTML5 basierendes Framework verweisen. Das Verständnis dieser Unterschiede trägt dazu bei, diese Begriffe in Ihrem Projekt genau zu verwenden.
Was ist die Funktion von H5?Apr 07, 2025 am 12:10 AMH5 oder HTML5 ist die fünfte Version von HTML. Es bietet Entwicklern ein stärkeres Toolset, so dass es einfacher ist, komplexe Webanwendungen zu erstellen. Die Kernfunktionen von H5 umfassen: 1) Elemente, mit denen Grafiken und Animationen auf Webseiten zeichnen können; 2) semantische Tags wie usw., um die Webseitenstruktur klar und förderlich für die SEO -Optimierung zu machen; 3) neue APIs wie GeolocationAPI unterstützen standortbasierte Dienste; 4) Die Kompatibilität des Cross-Browsers muss durch Kompatibilitätstests und Polyfill-Bibliothek gewährleistet werden.
So machen Sie H5 -LinkApr 06, 2025 pm 12:39 PMWie erstelle ich einen H5 -Link? Bestimmen Sie das Linkziel: Holen Sie sich die URL der H5 -Seite oder -Anwendung. Erstellen Sie HTML -Anker: Verwenden Sie das & lt; a & gt; Tag, um einen Anker zu erstellen und die Link -Ziel -URL anzugeben. Link -Eigenschaften festlegen (optional): Setzen Sie nach Bedarf Ziel-, Titel- und Onclick -Eigenschaften. Zu der Webseite hinzufügen: Hinzufügen von HTML -Ankercode zur Webseite, auf der der Link angezeigt werden soll.
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
MantisBT
Mantis ist ein einfach zu implementierendes webbasiertes Tool zur Fehlerverfolgung, das die Fehlerverfolgung von Produkten unterstützen soll. Es erfordert PHP, MySQL und einen Webserver. Schauen Sie sich unsere Demo- und Hosting-Services an.
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
MinGW – Minimalistisches GNU für Windows
Dieses Projekt wird derzeit auf osdn.net/projects/mingw migriert. Sie können uns dort weiterhin folgen. MinGW: Eine native Windows-Portierung der GNU Compiler Collection (GCC), frei verteilbare Importbibliotheken und Header-Dateien zum Erstellen nativer Windows-Anwendungen, einschließlich Erweiterungen der MSVC-Laufzeit zur Unterstützung der C99-Funktionalität. Die gesamte MinGW-Software kann auf 64-Bit-Windows-Plattformen ausgeführt werden.
PHPStorm Mac-Version
Das neueste (2018.2.1) professionelle, integrierte PHP-Entwicklungstool
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
