• آموزش 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 933 06-09-2016 ساعت 16:24
    آخرین ارسال: sheyda69
      آموزش سئو و بهینه سازی وب سایت در سایت ساز پرتال portal 0 363 21-08-2016 ساعت 08:05
    آخرین ارسال: portal
    Note آموزش استاندارد سازی قالب به سبک W3C (رفع خطاها) Behnam Designer 4 1,762 23-01-2015 ساعت 15:30
    آخرین ارسال: Stack OverFlow
    Note دوره آموزشی طراحی قالب با استفاده از Bootstrap rockstar 5 2,938 23-10-2014 ساعت 17:08
    آخرین ارسال: rockstar
    Note آموزش ساخت سایت shahab 1 692 23-07-2014 ساعت 22:04
    آخرین ارسال: Stack OverFlow
    Note آموزش طراحی قالب وردپرس WWWorker 7 1,603 11-03-2014 ساعت 11:04
    آخرین ارسال: WWWorker
    Note آموزش ajax نگار 1 618 23-11-2013 ساعت 22:00
    آخرین ارسال: maJID maGIC
    Note آموزش CSS : طراحی نمای صفحه در حالت پرینت zare 0 613 12-02-2013 ساعت 10:10
    آخرین ارسال: zare

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