• آموزش 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 1,090 06-09-2016 ساعت 16:24
    آخرین ارسال: sheyda69
    Note آموزش استاندارد سازی قالب به سبک W3C (رفع خطاها) Behnam Designer 4 1,865 23-01-2015 ساعت 15:30
    آخرین ارسال: Stack OverFlow
    Note دوره آموزشی طراحی قالب با استفاده از Bootstrap rockstar 5 3,074 23-10-2014 ساعت 17:08
    آخرین ارسال: rockstar
    Note آموزش ساخت سایت shahab 1 732 23-07-2014 ساعت 22:04
    آخرین ارسال: Stack OverFlow
    Note آموزش طراحی قالب وردپرس WWWorker 7 1,750 11-03-2014 ساعت 11:04
    آخرین ارسال: WWWorker
    Note آموزش ajax نگار 1 661 23-11-2013 ساعت 22:00
    آخرین ارسال: maJID maGIC
    Note آموزش CSS : طراحی نمای صفحه در حالت پرینت zare 0 634 12-02-2013 ساعت 10:10
    آخرین ارسال: zare

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