کانواس

saalek110

saalek110

Well-Known Member
رسم چند نقطه:

JavaScript: 
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="400" height="400" style="border:1px solid grey"></canvas>

<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
canvas.height = canvas.width;
ctx.transform(1, 0, 0, -1, 0, canvas.height)

const xArray = [50,60,70,80,90,100,110,120,130,140,150];
const yArray = [7,8,8,9,9,9,10,11,14,14,15];

ctx.fillStyle = "red";
for (let i = 0; i < xArray.length-1; i++) {
  let x = xArray[i]*400/150;
    let y = yArray[i]*400/15;
      ctx.beginPath();
        ctx.ellipse(x, y, 3, 3, 0, 0, Math.PI * 2);
          ctx.fill();
          }
          </script>

          </body>
          </html>
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
رسم یک مربع آبی:

JavaScript: 
<!DOCTYPE html>
<html>

<body>



<canvas id="myCanvas" width="400" height="400" style="border:1px solid grey"></canvas>



<script>

const canvas = document.getElementById("myCanvas");

const ctx = canvas.getContext("2d");


ctx.fillStyle = 'blue';

ctx.fillRect(30, 30, 50, 50);

</script>
</body>                                           
</html>

منبع:

عنصر کانواس - ویکی‌پدیا، دانشنامهٔ آزاد

fa.wikipedia.org fa.wikipedia.org
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
رسم دو مربع:

JavaScript: 
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Canvas experiment</title>
  </head>
  <body>
    <canvas id="canvas" width="150" height="150"></canvas>
    <script type="application/javascript">
      function draw() {
        const canvas = document.getElementById("canvas");
        if (canvas.getContext) {
          const ctx = canvas.getContext("2d");

          ctx.fillStyle = "rgb(200, 0, 0)";
          ctx.fillRect(10, 10, 50, 50);

          ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
          ctx.fillRect(30, 30, 50, 50);
        }
      }
      draw();
    </script>
  </body>
</html>

 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
همان منبع.

مربع قرمز توخالی:


JavaScript: 
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>Canvas tutorial</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="tutorial" width="150" height="150"></canvas>
    <script>
      function draw() {
        const canvas = document.getElementById("tutorial");
        if (canvas.getContext) {
          const ctx = canvas.getContext("2d");
        }
      }
      window.addEventListener("load", draw);
    </script>
  </body>
</html>

آپلود شد در:

منبع:
developer.mozilla.org

Basic usage of canvas - Web APIs | MDN

Let's start this tutorial by looking at the <canvas> HTML element itself. At the end of this page, you will know how to set up a canvas 2D context and have drawn a first example in your browser.
developer.mozilla.org developer.mozilla.org
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
کانواس در مقابل گرافیک برداری مقیاس پذیر (SVG)

اس‌وی‌جی یک استاندارد قدیمی‌تر برای طراحی اشکال در مرورگرهای است. با این حال، برخلاف کانواس که از گرافیک شطرنجی استفاده می‌کند، SVG برداری است، به طوری که هر یک شکل کشیده شده به به عنوان یک شی در مدل شیءگرای سند نمایش داده می‌شود که در انتها به بیت‌مپ تبدیل می‌شود. این به این معنی است که اگر ویژگی‌های یک شی SVG تغییر کند، مرورگر می‌تواند به‌طور خودکار آن شی را دوباره تغیر دهد.

اما از سوی دیگر، اشیا کانواس در حالت فوری کشیده می‌شوند. در مثال کانواس بالا، یک‌بار مستطیل مدلی را رسم می‌کند که توسط سیستم کشیده شده‌است. اگر موقعیت آن تغییر کند، کل صحنه باید مجدداً ترسیم شود، از جمله هر شی که ممکن است توسط مستطی لپوشش داده شده‌باشد. اما در مورد SVG، می‌توان به سادگی ویژگیِ موقعیت مستطیل را تغییر داد و مرورگر مشخص می‌کند که چگونه آن را بازنمایی کند.

تصاویر اس‌وی‌جی در اکس‌ام‌ال نمایش داده می‌شوند، و صحنه‌های پیچیده را می‌توان با ابزارهای ویرایش اکس‌ام‌ال به وجود آورد.

SVG می‌توان از گردانندگان رویداد (event handlers) استفاده کند و به هر شی یک رویداد بافزاید و مثلاً یک مستطیل به رویداد onClick واکنش نشان دهد. اما در کانواس اینطور نیست و برای ایجاد یک رویداد onClick در آن، باید مختصات محل کلیک کردن موس را دریافت و آن را با مختصات مستطیل رسم شده مقایسه کرد تا مشخص کرد که آیا کلیک صورت گرفته یا خیر.

از نظر مفهومی، کانواس یک API سطح پایین‌تر است که برای مثالبا آن می‌توان یک موتورِ نمایشِ SVG ساخته شود.



عنصر کانواس - ویکی‌پدیا، دانشنامهٔ آزاد

fa.wikipedia.org fa.wikipedia.org

تاپیک svg:

forum.majidonline.com

Svg

Svg
forum.majidonline.com forum.majidonline.com
 
saalek110

saalek110

Well-Known Member
رسم یک خط:



JavaScript: 
<!DOCTYPE html>

<html>

<body>



<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

Your browser does not support the HTML canvas tag.</canvas>

<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>

</body>
</html>



www.w3schools.com

W3Schools online HTML editor

The W3Schools online code editor allows you to edit code and view the result in your browser
www.w3schools.com www.w3schools.com
 
saalek110

saalek110

Well-Known Member
رسم دایره:


JavaScript: 
<!DOCTYPE html>

<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

Your browser does not support the HTML canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>

مقدار اول و دوم x و y است، یعنی محل قرار گرفتن. ، سومی شعاع دایره است.
چهارمی مقدار کمانی است که می خواهیم رسم کنیم. برای دایره کامل صفر بدهید.

www.w3schools.com

W3Schools online HTML editor

The W3Schools online code editor allows you to edit code and view the result in your browser
www.w3schools.com www.w3schools.com
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
نوشتن متن :

JavaScript: 
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

Your browser does not support the HTML canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);

</script>
</body>
</html>

www.w3schools.com

W3Schools online HTML editor

The W3Schools online code editor allows you to edit code and view the result in your browser
www.w3schools.com www.w3schools.com
 
saalek110

saalek110

Well-Known Member
JavaScript: 
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>

Stroke Text

www.w3schools.com

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com www.w3schools.com
 
saalek110

saalek110

Well-Known Member
رسم عکس:

JavaScript: 
<!DOCTYPE html>

<html>
<body>
<p>Image to use:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277">
<p>Canvas to fill:</p>
<canvas id="myCanvas" width="250" height="300"

style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>
<p><button onclick="myCanvas()">Try it</button></p>
<script>
function myCanvas() {

  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("scream");
  ctx.drawImage(img,10,10);
}
</script>
</body>
</html>


شرح : یک عکس در صفحه موجود است ،با استفاده از id آن متغیر img را ساخته است

و بعد با drawImage تصویر را رسم کرده.

www.w3schools.com

W3Schools online HTML editor

The W3Schools online code editor allows you to edit code and view the result in your browser
www.w3schools.com www.w3schools.com
 
saalek110

saalek110

Well-Known Member
Canvas Coordinates

The HTML canvas is a two-dimensional grid.

The upper-left corner of the canvas has the coordinates (0,0)

n the previous chapter, you saw this method used: fillRect(0,0,150,75).
This means: Start at the upper-left corner (0,0) and draw a 150x75 pixels rectangle.
www.w3schools.com

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com www.w3schools.com

میگه بالا و چپ مختصات صفر و صفر است برای رسم اون مستطیل قرمز از نقطه صفر و صفر به اندازه ۱۵۰ و ۷۵ پیکسل رسم کرده ایم.
 
saalek110

saalek110

Well-Known Member

Drawing Methods​

There are only 3 methods to draw directly on the canvas:
MethodDescription
fillRect()Draws a "filled" rectangle
strokeRect()Draws a rectangle (with no fill)
clearRect()Clears specified pixels within a rectangle

Path Methods​

MethodDescription
beginPath()Begins a new path or resets the current path
closePath()Adds a line to the path from the current point to the start
isPointInPath()Returns true if the specified point is in the current path
moveTo()Moves the path to a point in the canvas (without drawing)
lineTo()Adds a line to the the path
fill()Fills the current path
rect()Adds a rectangle to the path
stroke()Draws the current path
Circles and Curves
bezierCurveTo()Adds a cubic Bézier curve to the path
arc()Adds an arc/curve (circle, or parts of a circle) to the path
arcTo()Adds an arc/curve between two tangents to the path
quadraticCurveTo()Adds a quadratic Bézier curve to the path
ADVERTISEMENT

Text​

Method/PropDescription
directionSets or returns the direction used to draw text
fillText()Draws "filled" text on the canvas
fontSets or returns the font properties for text content
measureText()Returns an object that contains the width of the specified text
strokeText()Draws text on the canvas
textAlignSets or returns the alignment for text content
textBaselineSets or returns the text baseline used when drawing text

Colors, Styles, and Shadows​

Method/PropertyDescription
addColorStop()Specifies the colors and stop positions in a gradient object
createLinearGradient()Creates a linear gradient (to use on canvas content)
createPattern()Repeats a specified element in the specified direction
createRadialGradient()Creates a radial/circular gradient (to use on canvas content)
fillStyleSets or returns the color, gradient, or pattern used to fill the drawing
lineCapSets or returns the style of the end caps for a line
lineJoinSets or returns the type of corner created, when two lines meet
lineWidthSets or returns the current line width
miterLimitSets or returns the maximum miter length
shadowBlurSets or returns the blur level for shadows
shadowColorSets or returns the color to use for shadows
shadowOffsetXSets or returns the horizontal distance of the shadow from the shape
shadowOffsetYSets or returns the vertical distance of the shadow from the shape
strokeStyleSets or returns the color, gradient, or pattern used for strokes

Transformations​

MethodDescription
scale()Scales the current drawing bigger or smaller
rotate()Rotates the current drawing
translate()Remaps the (0,0) position on the canvas
transform()Replaces the current transformation matrix for the drawing
setTransform()Resets the current transform to the identity matrix. Then runs transform()

Image Drawing​

MethodDescription
drawImage()Draws an image, canvas, or video onto the canvas

The ImageData Object / Pixel Manipulation​

Method/PropertyDescription
createImageData()Creates a new, blank ImageData object
getImageData()Returns an ImageData object that copies the pixel data for the specified rectangle on a canvas
ImageData.dataReturns an object that contains image data of a specified ImageData object
ImageData.heightReturns the height of an ImageData object
ImageData.widthReturns the width of an ImageData object
putImageData()Puts the image data (from a specified ImageData object) back onto the canvas

Compositing​

PropertyDescription
globalAlphaSets or returns the current alpha or transparency value of the drawing
globalCompositeOperationSets or returns how a new image are drawn onto an existing image

Other Methods​

MethodDescription
clip()Clips a region of any shape and size from the original canvas
save()Saves the state of the current drawing context and all its atributes
restore()Restores the previously saved state and attributes
createEvent()
getContext()
toDataURL()

​

 
saalek110

saalek110

Well-Known Member
منبع جداول بالا:

www.w3schools.com

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com www.w3schools.com
 
برای ارسال پاسخ شما باید وارد سیستم شوید.

آخرین مطالب مجیدآنلاین

جدیدترین ارسال ها

بالا