ความคิดเห็น: ฟังก์ชั่นดั้งเดิมที่มีให้ในวัตถุวาดภาพผืนผ้าใบ HTML5 ไม่ได้ตระหนักถึงฟังก์ชั่นของการวาดรูปสี่เหลี่ยมผืนผ้าแบบโค้งมนและเส้นประ ผ่าน Object.prototype ของ JavaScript คุณสามารถเพิ่มฟังก์ชั่นทั้งสองนี้ลงในวัตถุ CanvasrenderingContext2d การใช้งานเฉพาะมีดังนี้ เพื่อนที่สนใจสามารถอ้างถึงได้
HTML5 Canvas สี่เหลี่ยมผืนผ้าโค้งมนและเส้นประที่กำหนดเอง (เส้นโค้งและเส้นประ)ใช้การสาธิตการเพิ่มฟังก์ชั่นฟังก์ชั่นที่กำหนดเองลงในวัตถุการวาดบริบท HTML Canvas 2D วิธีการวาดเส้นประและควบคุมขนาดของเส้นประและเรียนรู้ทักษะของการวาดรูปสี่เหลี่ยมผืนผ้าแบบโค้งมน
ฟังก์ชั่นดั้งเดิมที่มีให้ในวัตถุการวาดภาพผืนผ้าใบ HTML5 ไม่ได้ตระหนักถึงฟังก์ชั่นของการวาดรูปสี่เหลี่ยมผืนผ้าแบบโค้งมนและเส้นประ แต่วัตถุภาษา JavaScript สามารถใช้เพื่อเพิ่มฟังก์ชั่นทั้งสองนี้ลงในวัตถุ CanvasrenderingContext2d เอฟเฟกต์การสาธิตรหัสมีดังนี้:
รหัสของ Component FishComponent.js มีดังนี้:
CanvasrenderingContext2d.prototype.roundrect =
ฟังก์ชั่น (x, y, ความกว้าง, ความสูง, รัศมี, เติม, จังหวะ) {
if (typeof stroke == "undefined") {
stroke = true;
-
if (typeof radius === "undefined") {
รัศมี = 5;
-
this.beginpath ();
this.moveto (x + radius, y);
this.lineto (x + ความกว้าง - รัศมี, y);
this.quadraticcurveto (x + ความกว้าง, y, x + ความกว้าง, y + รัศมี);
this.lineto (x + ความกว้าง, y + ความสูง - รัศมี);
this.quadraticcurveto (x + ความกว้าง, y + ความสูง, x + ความกว้าง - รัศมี, y + ความสูง);
this.lineto (x + รัศมี, y + ความสูง);
this.quadraticcurveto (x, y + ความสูง, x, y + ความสูง - รัศมี);
this.lineto (x, y + รัศมี);
this.quadraticcurveto (x, y, x + รัศมี, y);
this.closepath ();
ถ้า (จังหวะ) {
this.stroke ();
-
ถ้า (เติม) {
this.fill ();
-
-
CanvasrenderingContext2d.prototype.dashedlineto = ฟังก์ชั่น (fromx, fromy, tox, ของเล่น, รูปแบบ) {
// ระยะเวลาเริ่มต้น -> 5px
if (typeof pattern === "undefined") {
รูปแบบ = 5;
-
// คำนวณ delta x และ delta y
var dx = (tox - fromx);
var dy = (ของเล่น - fromy);
ระยะ var = math.floor (math.sqrt (dx*dx + dy*dy));
var dashlineInteveral = (รูปแบบ <= 0)? ระยะทาง: (ระยะทาง/รูปแบบ);
var deltay = (dy/distance) * รูปแบบ;
var deltax = (dx/ระยะทาง) * รูปแบบ;
// วาดเส้นประ
this.beginpath ();
สำหรับ (var dl = 0; dl <dashlineinteveral; dl ++) {
ถ้า (dl%2) {
this.lineto (fromx + dl*deltax, fromy + dl*deltay);
} อื่น {
this.moveto (fromx + dl*deltax, fromy + dl*deltay);
-
-
this.stroke ();
-
การสาธิตการโทรใน HTML:
<! doctype html>
<html>
<head>
<meta http-equiv = "x-ua ที่เข้ากันได้" เนื้อหา = "chrome = ie8">
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<title> การสาธิตสี่เหลี่ยมผืนผ้าโค้งมนของผ้าใบ </title>
<script src = "fishComponent.js"> </script>
<link href = "default.css" />
<script>
var ctx = null; // บริบท 2D ตัวแปรส่วนกลาง
var imageTexture = null;
window.onload = function () {
var canvas = document.getElementById ("text_canvas");
console.log (canvas.parentNode.ClientWidth);
canvas.width = canvas.parentNode.ClientWidth;
Canvas.height = Canvas.parentNode.Clientheight;
if (! canvas.getContext) {
console.log ("ไม่รองรับผืนผ้าใบโปรดติดตั้งเบราว์เซอร์ที่เข้ากันได้ HTML5");
กลับ;
-
var context = canvas.getContext ('2d');
Context.strokestyle = "Red";
Context.FillStyle = "RGBA (100,255,100, 0.5)";
context.roundrect (50, 50, 150, 150, 5, true);
Context.strokestyle = "Blue";
สำหรับ (var i = 0; i <10; i ++) {
var delta = i*20;
รูปแบบ var = i*2+1;
บริบท DASHEDLINETO (250, 50+เดลต้า, 550, 50+เดลต้า, รูปแบบ);
-
-
</script>
</head>
<body>
<H1> การสาธิต Dash -Line HTML5 HTML5 - โดยปลาที่มืดมน </H1>
<pre> เส้นประและสี่เหลี่ยมผืนผ้าโค้งมน </pre>
<div>
<Canvas> </sanvas>
</div>
</body>
</html>