Yük üzerinde çizmek için Tuval resmini çiz

Tamam Merhaba.Yük üzerinde çizmek için Tuval resmini çiz

Sahip olduğum küçük bir proje için HTML kanvasını kullanmaya karar verdim.

Henüz bir başlangıç yok. Sadece Tuval temellerini öğreniyorum ve ben bir daire Burada

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>title</title> 
    <style> 
     body { 
     margin: 0px; 
     padding: 0px; 
     background: #222; 
     } 

    </style> 
    <link rel="stylesheet" href="style.css" type="text/css"> 
</head> 
<body> 
<canvas id="myCanvas" width="578" height="250"></canvas> 

    <script> 
     var canvas = document.getElementById('myCanvas'); 
     var context = canvas.getContext('2d'); 
     var x = canvas.width/2; 
     var y = canvas.height/2; 
     var radius = 75; 
     var startAngle = 1.5 * Math.PI; 
     var endAngle = 3.2 * Math.PI; 
     var counterClockwise = false; 
     context.beginPath(); 
     context.arc(x, y, radius, startAngle, endAngle, counterClockwise); 
     context.lineWidth = 15; 
     // line color 
     context.strokeStyle = 'black'; 
     context.stroke(); 
    </script> 

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js" type="text/javascript"></script> 
</body> 
</html>

canlandırın istiyorum ben başarmak için çalışıyorum şeyin bir keman http://jsfiddle.net/oskar/Aapn8/ olduğunu. "Bounce" efektiyle uğraşmak zorunda değilim.

Ama ben temelde, sayfa yüküne çizim yapmak ve istenen Ark Açısı'nda durmasını istiyorum. İşte, şimdiye kadar oluşturduğum şeyin Keman'ı.

http://jsfiddle.net/skerwin/uhVj6/

Teşekkür

kaynak

2013-03-28 Blackline

http://codepen.io/dcdev/pen/upjDy – davidcondrey

Live Demo

yapmaya çalışacağım Eğer

// requestAnimationFrame Shim 
(function() { 
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || 
           window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; 
    window.requestAnimationFrame = requestAnimationFrame; 
})(); 



var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext('2d'); 
var x = canvas.width/2; 
var y = canvas.height/2; 
var radius = 75; 
var endPercent = 85; 
var curPerc = 0; 
var counterClockwise = false; 
var circ = Math.PI * 2; 
var quart = Math.PI/2; 

context.lineWidth = 10; 
context.strokeStyle = '#ad2323'; 
context.shadowOffsetX = 0; 
context.shadowOffsetY = 0; 
context.shadowBlur = 10; 
context.shadowColor = '#656565'; 


function animate(current) { 
    context.clearRect(0, 0, canvas.width, canvas.height); 
    context.beginPath(); 
    context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false); 
    context.stroke(); 
    curPerc++; 
    if (curPerc < endPercent) { 
     requestAnimationFrame(function() { 
      animate(curPerc/100) 
     }); 
    } 
} 

animate();

Temel olarak, aynı formülü kullandığınız demo bağlantısından kullandım. Ardından, çağrıldığında, istenen bitiş yüzdesine ulaşana kadar daireyi güncelleyeceği bir animasyon işlevi ekledim.

Animasyon sürekli olarak requestAnimationFrame tarafından çağrılmaktadır, bu, tuval ile her türlü animasyon yapmanın tercih edilen yoludur. Her zaman animate çağrıldığında mevcut yüzde bir artar, daha sonra ark yeniden çizmek için kullanılır.

kaynak

2013-03-28 22:24:50 Loktar

Teşekkürler, bunu yaptınız ... Bazı problemlerim var tarayıcım ile: - [ – metalwings

Canlı Demo'unuzda herhangi bir güncelleme yok gibi görünüyor mu? Aynı – Blackline

görünüyor Görünüş – metalwings

Üç adım:

1) Make an "init" function which will assign the variables (they aren't in any 
function). 
2) Then use requestAnimationFrame, or setInterval with your 
drawing function you will create. 
3) In this "drawing/updating" function you're going to 
write your code to do the maths and then just animate the updated circle.

kodunuzda herhangi işlevleri yoktur. Eğer işlevleri yapmak ve ilk bu konu hakkında bir öğreticiler okumak daha iyidir küresel değişkendir + what bunların nasıl kullanılacağını bilmiyorum ama yine de ben size bir örnek :)

kaynak

2013-03-28 21:35:32 metalwings

Tamam. Eğer bir çeşit keman ile bana yardım edebilirseniz, bu harika olur. Ben sadece Canvas'a adım atan bir HTML/CSS geliştiricisiyim. Ben belli belirsiz fonksiyonlar biliyorum (PHP'den). – Blackline

Tamam, işim bittiğinde keman yapacak :) Hmm ... Çok iyi bir PHP bilmiyorum ama bence bu çok eşit derecede eşit. Tuval, JavaScript ve jQuery (JavaScript gibi) kullanır ... Umarım 30 dakika içinde bitirdim :) – metalwings

Keman metalwings'i dört gözle bekliyorum. – Blackline

Yük üzerinde çizmek için Tuval resmini çiz

cevap

İlgili konular