Belajar sambil bermain dengan HTML5 (1) Kaedah pelaksanaan kanvas _html5 kemahiran tutorial

1. tag

Html5 memperkenalkan teg baharu pada kanvas ini. Dengan teg ini, prestasi grafik penyemak imbas telah dipertingkatkan dengan ketara Adakah Flash dan SilverLight berasa terancam

Pautan berita: Google mendakwa bahawa penyemak imbas Chrome 7 akan menjadi 60 kali lebih pantas

penggunaan teg adalah sangat mudah, seperti berikut:

Salin kod

Kodnya adalah seperti berikut :

Pelayar anda tidak menyokong Kanvas tag

Anda boleh menetapkan lebar dan tingginya, dan menetapkan warna latar belakangnya, sempadan gaya, dsb. melalui CSS tunggu.

Anda boleh mendapatkan lebih banyak tentang teg di sini. Kandungan di tengah teg

ialah kandungan gantian Jika penyemak imbas pengguna tidak menyokong teg , maka kandungan ini akan dipaparkan Kandungan bahagian tersebut akan diabaikan.

Kod di atas dipaparkan seperti berikut:

Pelayar anda tidak menyokong teg Kanvas

Jika anda menggunakan penyemak imbas IE, anda mungkin hanya boleh lihatnya Dapatkan petua jika anda menggunakan Google Chrome atau Firefox, anda boleh melihat kawasan persegi merah.
2. Konteks Rendering
Malah, kami tidak boleh melakukan apa-apa hanya dengan teg mesti mendapatkan konteks Peranti DC terlebih dahulu, lukisan pada teg juga memerlukan terlebih dahulu mendapatkan konteks pemaparan Grafik kami tidak dilukis terus ke skrin, tetapi ke konteks (Konteks) dahulu, dan kemudian dimuat semula ke skrin. .
Di luar topik: Mengapakah kita perlu mencipta konsep yang rumit seperti "konteks"? Oleh kerana objek konteks, kita boleh membuat pelbagai peranti grafik kelihatan sama di mata kita perkara konkrit menjadi abstrak yang bersatu, dengan itu mengurangkan beban kita.
Mendapatkan konteks adalah sangat mudah, hanya memerlukan dua baris kod berikut:
var canvas = document.getElementById('tutorial'
var ctx = canvas.getContext('2d'); 🎜>Dapatkan objek kanvas dahulu, dan kemudian panggil kaedah getContext bagi objek kanvas pada masa ini hanya boleh lulus dalam parameter "2d" dalam masa terdekat, ia mungkin menyokong parameter "3d". maksudnya, sama-sama kita nantikan.
Kaedah getContext mengembalikan objek CanvasRenderingContext2D, iaitu objek konteks pemaparan Anda boleh mendapatkan maklumat lanjut tentangnya
di sini, iaitu beberapa kaedah lukisan.

3 Sokongan penyemak imbas Selain memaparkan kandungan alternatif pada penyemak imbas yang tidak disokong, kami juga boleh menggunakan skrip untuk menyemak sama ada penyemak imbas menyokong kanvas , kaedahnya sangat mudah, cuma tentukan sama ada fungsi getContext wujud, kodnya adalah seperti berikut:

Salin kodKod adalah seperti berikut:

var canvas = document.getElementById('tutorial');
if (canvas.getContext){
alert("Supports tag");
alert(" tag tidak disokong");
}



四、一个小例子
下面将用 HTML5 的绘图功能演示一个上下移动的线条的例子， 具体的代码将在后续内容中给出

<canvas style="background-color: black" id="move_line" height="200" width="400">你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器</canvas> <script type="text/javascript"> var canvas = document.getElementById('move_line'); var ctx=canvas.getContext("2d"); //上下移动的直线 var width=400; var height=200; var y=0 var dir=1; ctx.strokeStyle = "rgb(255,0,0)"; function draw(){ ctx.clearRect(0,0,width,height) ctx.beginPath(); ctx.moveTo(0,y); ctx.lineTo(width-1,y); ctx.stroke(); y=y+dir; if((y==0)||(y==(height-1))) dir=dir*(-1); } </script><p><input onclick="interval=setInterval(draw,10);" value="开始" type="button"> <input onclick="clearInterval(interval);" value="停止" type="button">
提示：您可以先修改部分代码再运行

你的浏览器不支持 标签，请使用 Chrome 浏览器 或者 FireFox 浏览器