آموزش Canvas در HTML5

سلام وقت بخیر
این کد رو تو نوت ویرایشکر متن کپی کرده و با پسوند html. ذخیره کنید و بعد اجرا کنید و قدرت Canvas در HTML5 و جاوا اسکریپت رو ببینید :yeah:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="900" height="600" style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>

var el = document.getElementById('myCanvas');
var ctx = el.getContext('2d');

ctx.lineWidth = 1;
ctx.lineJoin = ctx.lineCap = 'round';

var isDrawing, points = [ ];

el.onmousedown = function(e) {
  points = [ ];
  isDrawing = true;
  points.push({ x: e.clientX, y: e.clientY });
};

el.onmousemove = function(e) {
  if (!isDrawing) return;

  //ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  points.push({ x: e.clientX, y: e.clientY });

  ctx.beginPath();
  ctx.moveTo(points[points.length - 2].x, points[points.length - 2].y);
  ctx.lineTo(points[points.length - 1].x, points[points.length - 1].y);
  ctx.stroke();
  
  for (var i = 0, len = points.length; i < len; i++) {
    dx = points[i].x - points[points.length-1].x;
    dy = points[i].y - points[points.length-1].y;
    d = dx * dx + dy * dy;

    if (d < 1000) {
      ctx.beginPath();
      ctx.strokeStyle = 'rgba(0,0,0,0.3)';
      ctx.moveTo( points[points.length-1].x + (dx * 0.2), points[points.length-1].y + (dy * 0.2));
      ctx.lineTo( points[i].x - (dx * 0.2), points[i].y - (dy * .2));
      ctx.stroke();
    }
  }
};

el.onmouseup = function() {
  isDrawing = false;
  points.length = 0;
};

</script>

</body>
</html>

اینم یه نقاشی از من :blinksmiley:

[align=center]

[/align]

سلام
بسیار exelent

Extended by me :

قابلیت تغییر رنگ و اندازه قلم

<!DOCTYPE html>
<html>
<body>
<div id="workarea">
<canvas id="myCanvas" width="900" height="600" style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</div>
<div id="toolbox">
STROKE: <input id="strk" type="text" value="rgba(0,0,69,2)"/>
LINE WIDTH: <input id="lnwidth" type="text" value="1"/>
</div>
<script>
var stroke='rgba(0,0,69,2)';
var el = document.getElementById('myCanvas');
var ctx = el.getContext('2d');
ctx.lineWidth = 1;
ctx.lineJoin = ctx.lineCap = 'round';

var isDrawing, points = [ ];

el.onmousedown = function(e) {
stroke=document.getElementById('strk').value;
ctx.lineWidth =document.getElementById('lnwidth').value;

  points = [ ];
  isDrawing = true;
  points.push({ x: e.clientX, y: e.clientY });
};

el.onmousemove = function(e) {
  if (!isDrawing) return;

  //ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  points.push({ x: e.clientX, y: e.clientY });

  ctx.beginPath();
  ctx.moveTo(points[points.length - 2].x, points[points.length - 2].y);
  ctx.lineTo(points[points.length - 1].x, points[points.length - 1].y);
  ctx.stroke();
  
  for (var i = 0, len = points.length; i < len; i++) {
    dx = points[i].x - points[points.length-1].x;
    dy = points[i].y - points[points.length-1].y;
    d = dx * dx + dy * dy;

    if (d < 1000) {
      ctx.beginPath();
      ctx.strokeStyle = stroke;
      ctx.moveTo( points[points.length-1].x + (dx * 0.2), points[points.length-1].y + (dy * 0.2));
      ctx.lineTo( points[i].x - (dx * 0.2), points[i].y - (dy * .2));
      ctx.stroke();
    }
  }
};

el.onmouseup = function() {
  isDrawing = false;
  points.length = 0;
};

</script>

</body>
</html>

کارت عالیه داداش
+1 rep :winksmiley02:

آموزش Canvas در HTML5

سوال برنامه نویسی دارید؟

خوش آمدید