تعليق: يقدم هذا المقال بشكل أساسي أمثلة رمز الرسم البياني HTML5 Canvas. يمكن للأصدقاء الذين يحتاجون إليها الرجوع إليها.
صورة التكاثر:
نصيحة: انسخ الرمز إلى ملف HTML وحفظه ، وفتحه مباشرة لرؤية التأثير.
رمز التنفيذ:
<html lang = "zh">
<head>
<meta charset = "gbk">
<title> الرسم البياني SawToothed </title>
<script type = "text/javaScript">
Window.AdDeventListener ("load" ، eventWindowloaded ، false) ؛
وظيفة eventwindowloaded () {
var x ، y ؛
var thecanvas = document.getElementById ("canvas") ؛
var context = thecanvas.getContext ("2d") ؛
//صندوق
context.strokestyle = '#00f' ؛
context.linewidth = 10 ؛
context.strokerect (0 ، 0 ، thecanvas.width-0 ، thecanvas.height-0) ؛
context.fillStyle = "#00F" ؛
لـ (x = 5 ؛ x <= canvas.width ؛ x = x+10) {
context.beginPath () ؛
Context.arc (x ، 5،5،0 ، math.pi ، false) ؛
context.closepath () ؛
context.fill () ؛
context.beginPath () ؛
Context.arc (x ، canvas.height-5،5،0 ، Math.Pi ، true) ؛
context.closepath () ؛
context.fill () ؛
}
لـ (y = 5 ؛ y <= canvas.height ؛ y = y+10) {
context.beginPath () ؛
context.arc (5 ، y ، 5،0 ، math.pi*2 ، true) ؛
context.arc (canvas.width-5 ، y ، 5،0 ، math.pi*2 ، true) ؛
context.closepath () ؛
context.fill () ؛
}
}
</script>
</head>
<body>
<viv>
<canvas>
</div>
</body>
</html>