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

[HTML]
<!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>
[/HTML]

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

[تصویر:  201312121386878826brush.jpg]

پاسخ
#2
Note 
سلام
بسیار exelent

Extended by me :
+ قابلیت تغییر رنگ و اندازه قلم
[HTML]
<!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>
[/HTML]

HAPPY CODING
پاسخ
#3
Note 
کارت عالیه داداش
+1 rep :winksmiley02:

Shy
When we speak of “free software”, we're talking about freedom, not price
پاسخ
ایجاد موضوع جدید   پاسخ به موضوع  

موضوعات مرتبط با این موضوع...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  آموزش نکات تکمیلی برای طراحی وبسایت تجاری sheyda69 0 169 06-09-2016 ساعت 16:24
آخرین ارسال: sheyda69
  آموزش سئو و بهینه سازی وب سایت در سایت ساز پرتال portal 0 105 21-08-2016 ساعت 08:05
آخرین ارسال: portal
Note آموزش استاندارد سازی قالب به سبک W3C (رفع خطاها) Behnam Designer 4 1,444 23-01-2015 ساعت 15:30
آخرین ارسال: Stack OverFlow
Note دوره آموزشی طراحی قالب با استفاده از Bootstrap rockstar 5 2,469 23-10-2014 ساعت 17:08
آخرین ارسال: rockstar
Note آموزش ساخت سایت shahab 1 564 23-07-2014 ساعت 22:04
آخرین ارسال: Stack OverFlow
Note آموزش طراحی قالب وردپرس WWWorker 7 1,187 11-03-2014 ساعت 11:04
آخرین ارسال: WWWorker
Note آموزش ajax نگار 1 482 23-11-2013 ساعت 22:00
آخرین ارسال: maJID maGIC
Note آموزش CSS : طراحی نمای صفحه در حالت پرینت zare 0 529 12-02-2013 ساعت 10:10
آخرین ارسال: zare

کاربرانِ درحال بازدید از این موضوع:   1 مهمان