کار با canvas در html 5

این تاپیک 2 پاسخ و 1 مشارکت کننده دارد . آخرین آپدیت توسط :  مانی تهرانی ،‏ 3 سال پیش .

٧۵٢ visibility
نویسنده پست
شنبه ، ۲۶ مهر ۱۳۹۳     ۸:۱۰ ب.ظ #


مانی تهرانی

Subscriber
49 پست17 تاپیک

سلام بر دوستان

من یه طرحی هست که میخوام با canvas پیاده سازی کنم و میخوام که خطوط دورانی رو به صورت لایه لایه طراحی کنم که نیاز به کمک دوستان دارم و میخوام دقیقا مثل عکس زیر بشه. در ضمن ارتفاع کار هم 590 پیکسل هست.

ببینید من یه کدی نوشتم ولی با هر رفرش شدن صفحه به صورت رندم شکل خطوط دورانی عوض میشه نمیخوام این اتفاق بیفته و میخوام که برای هر لایه یک canvas بنویسم و به شکل عکسی که گذاشتم در بیاد و تغییر نکنه.

اینم کدمه:

$(document).ready(function () {
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    
    canvas.width = window.innerWidth ;
    canvas.height = window.innerHeight - 200;
    var centerX = canvas.width / 2;
    var centerY = canvas.height / 2;

    canvas.style.marginTop = canvas.height / 10.2 + 'px';

    var vertical = document.getElementById('vertical');
    vertical.style.height = canvas.height + 'px';
    vertical.style.marginTop = canvas.height / 10.2 + 'px';
    vertical.style.left = centerX + 150 + 'px';

    var img = document.getElementById('img');
    img.style.marginTop = canvas.height / 8.2 + 'px';
    img.style.left = centerX + 170 + 'px';

    var menu = document.getElementById('menu');
    menu.style.marginTop = canvas.height / 2.4 + 'px';
    menu.style.left = centerX + 190 + 'px';
    

    for (var i = 1; i <= 30; i++) {
        draw();
    }

    function draw() {
        var line_width = [20, 10, 10, 2, 5, 5, 10, 10, 20, 5, 2, 10, 10, 2, 5, 5, 5, 2, 10, 10, 2, 2, 5, 10, 10, 20, 20, 20, 20];
        var lw = Math.floor(Math.random() * 40);
        var lwidth = line_width[lw];
        var sAngle = Math.floor(Math.random() * 180) * Math.PI / 180;
        var eAngle = Math.floor(Math.random() * 180) * Math.PI / 180;
        var radius = Math.floor(Math.random() * (canvas.width / 2.9)) + (canvas.width / 4);
        

        context.beginPath();
        context.arc(centerX + 200, centerY, radius,sAngle, eAngle, false);
        context.lineWidth = lwidth;
        context.strokeStyle = 'maroon';
        context.stroke();
    }
});
ممنون میشم از دوستان کمکم کنند.

این هم عکس طرح من:

0  تشکر
شنبه ، ۲۶ مهر ۱۳۹۳     ۸:۱۲ ب.ظ #


مانی تهرانی

Subscriber
49 پست17 تاپیک

ببخشید کدهام بد شد:

0  تشکر
شنبه ، ۲۶ مهر ۱۳۹۳     ۸:۲۱ ب.ظ #


مانی تهرانی

Subscriber
49 پست17 تاپیک

دوستان فایل js رو ضمیمه می کنم.

 

0  تشکر
پست 1 تا 3 (از مجموع 3 پست)

برای پاسخ دادن به این تاپیک باید وارد سایت شوید .