کار با canvas در html 5

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

این تاپیک تاکنون 578 بازدید داشته است .

نویسنده پست
شنبه ، 18 اکتبر 2014     8:10 ب.ظ #


مانی تهرانی

Subscriber
45 پست16 تاپیک

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

من یه طرحی هست که میخوام با 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();
    }
});
ممنون میشم از دوستان کمکم کنند.

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

پیوست ها:
You must be logged in to view attached files.
0  تشکر
شنبه ، 18 اکتبر 2014     8:12 ب.ظ #


مانی تهرانی

Subscriber
45 پست16 تاپیک

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

0  تشکر
شنبه ، 18 اکتبر 2014     8:21 ب.ظ #


مانی تهرانی

Subscriber
45 پست16 تاپیک

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

 

پیوست ها:
You must be logged in to view attached files.
0  تشکر
پست 1 تا 3 (از مجموع 3 پست)

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