التعليق: لا تدرك الوظائف الأصلية المتوفرة في كائنات رسم HTML5 Canvas وظيفة رسم المستطيلات المستديرة والخطوط المنقطة. من خلال الكائن. التنفيذ المحدد هو كما يلي. يمكن للأصدقاء المهتمين الرجوع إليها.
HTML5 Canvas مستطيلة مستديرة وخط اندفاعة (خط مستدير وخط اندفاعة)قم بتنفيذ عرض إظهار لإضافة وظائف مخصصة إلى كائن رسم سياق HTML Canvas 2D ، وكيفية رسم الخطوط المنقطة والتحكم في حجم الخطوط المنقطة ، وتعلم مهارات رسم المستطيلات المدورة.
لا تدرك الوظائف الأصلية المتوفرة في كائنات رسم القماش HTML5 وظيفة رسم المستطيلات المستديرة والخطوط المنقطة ، ولكن يمكن استخدام كائن لغة JavaScript.Prototype لإضافة هاتين الوظيفين إلى كائنات الكائنات canvasrenderingcontext2d. تأثير عرض الكود على النحو التالي:
مدونة مدونة FishComponent.js على النحو التالي:
canvasrenderingContext2d.Prototype.RoundRect =
وظيفة (x ، y ، العرض ، الارتفاع ، نصف قطرها ، ملء ، السكتة الدماغية) {
if (typeof stroke == "undefined") {
السكتة الدماغية = صواب ؛
}
if (typeof radius === "undefined") {
دائرة نصف قطرها = 5 ؛
}
this.beginpath () ؛
this.moveto (X + Radius ، y) ؛
this.lineto (x + عرض - نصف قطرها ، y) ؛
this.quadraticCurveto (x + width ، y ، x + width ، y + radius) ؛
this.lineto (x + عرض ، y + الارتفاع - نصف القطر) ؛
this.quadraticCurveto (x + عرض ، y + الارتفاع ، x + عرض - نصف قطر ، y + الارتفاع) ؛
this.lineto (x + نصف قطرها ، y + الارتفاع) ؛
this.quadraticCurveto (x ، y + الارتفاع ، x ، y + الارتفاع - نصف القطر) ؛
this.lineto (x ، y + radius) ؛
this.quadraticCurveto (x ، y ، x + radius ، y) ؛
this.closepath () ؛
إذا (السكتة الدماغية) {
this.stroke () ؛
}
إذا (ملء) {
this.fill () ؛
}
} ؛
canvasrenderingcontext2d.prototype.dashedlineto = function (fromx ، from ، tox ، toy ، pattern) {
// المسافة الفاصلة الافتراضية -> 5px
if (typeof pattern === "undefined") {
نمط = 5 ؛
}
// حساب الدلتا X و Delta Y
var dx = (tox - fromx) ؛
var dy = (toy - fromy) ؛
var distant = math.floor (math.sqrt (dx*dx + dy*dy)) ؛
var dashlineInteveral = (نمط <= 0)؟ المسافة: (المسافة/النمط) ؛
var deltay = (dy/distant) * نمط ؛
var deltax = (dx/distant) * نمط ؛
// ارسم خط القيادة
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 compatible" content = "chrome = ie8">
<meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8">
<title> Canvas Rounded Rectangle Demo </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 pattern = i*2+1 ؛
context.dashedlineto (250 ، 50+Delta ، 550 ، 50+Delta ، pattern) ؛
}
}
</script>
</head>
<body>
<h1> html5 canvas dash -line demo - بواسطة الأسماك القاتمة </h1>
<pre> خط القيادة والمستطيل المستدير </pre>
<viv>
<Canvas> </tanvas>
</div>
</body>
</html>