Rumah
hujung hadapan web
Tutorial H5
Cara melukis poligon seperti segi tiga dan segi empat tepat dengan petua tutorial HTML5 Canvas_html5
hujung hadapan web
Tutorial H5
Cara melukis poligon seperti segi tiga dan segi empat tepat dengan petua tutorial HTML5 Canvas_html5
Cara melukis poligon seperti segi tiga dan segi empat tepat dengan petua tutorial HTML5 Canvas_html5
canvas
html5
segi tiga
segi empat tepat
Sifat dan kaedah utama objek CanvasRenderingContext2D yang diperlukan untuk melukis poligon menggunakan HTML5 Canvas (yang mempunyai "()" ialah kaedah) adalah seperti berikut:
| 属性或方法 | 基本描述 |
|---|---|
| strokeStyle | 用于设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是一个表示css颜色值的字符串。如果你的绘制需求比较复杂，该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象 |
| globalAlpha | 定义绘制内容的透明度，取值在0.0(完全透明)和1.0(完全不透明)之间，默认值为1.0。 |
| lineWidth | 定义绘制线条的宽度。默认值是1.0，并且这个属性必须大于0.0。较宽的线条在路径上居中，每边各有线条宽的一半。 |
| lineCap | 指定线条两端的线帽如何绘制。合法的值是 butt、round和square。默认值是"butt"。 |
| beginPath() | 开始一个新的绘制路径。每次绘制新的路径之前记得调用该方法。 |
| moveTo(int x, int y) | 定义一个新的绘制路径的起点坐标 |
| lineTo(int x, int y) | 定义一个绘制路径的中间点坐标 |
| stroke(int x, int y) | 沿着绘制路径的坐标点顺序绘制直线 |
| closePath() | 如果当前的绘制路径是打开的，则闭合该绘制路径。 |
Lukis segitiga
Kod JavaScriptSalin kandungan ke papan keratan
- "UTF-8"
- >
Contoh Lukisan Kanvas HTML5 Bermula - "myCanvas"
- lebar= "400px"
- tinggi= "300px"
- style="sempadan: 1px merah pepejal;"> Pelayar anda tidak menyokong teg kanvas.
- >
- //Dapatkan objek Kanvas (kanvas)
- var kanvas = document.getElementById("myCanvas" );
- //Cukup mengesan sama ada penyemak imbas semasa menyokong objek Canvas untuk mengelakkan ralat sintaks dalam sesetengah penyemak imbas yang tidak menyokong html5
- jika(canvas.getContext){ //Dapatkan objek CanvasRenderingContext2D (berus) yang sepadan
- var
- ctx = canvas.getContext("2d");
- //Mulakan laluan lukisan baharu
- ctx.beginPath(); //Tetapkan warna garisan kepada biru
- ctx.strokeStyle = "biru";
- //Tetapkan koordinat titik permulaan laluan
- ctx.moveTo(20, 50);
- //Lukis segmen garis lurus ke titik koordinat (60, 50) ctx.lineTo(20, 100);
- //Lukis segmen garis lurus ke titik koordinat (60, 90)
- ctx.lineTo(70, 100);
- //Tutup laluan lukisan dahulu. Ambil perhatian bahawa garis lurus akan digunakan untuk menyambungkan titik akhir semasa dan titik akhir permulaan. ctx.closePath();
- //Akhir sekali, lukis garis lurus mengikut laluan lukisan ctx.stroke();
- }