Koleksi kod contoh lukisan asas Kanvas HTML5 kemahiran tutorial kod_html5

Lukisan asas

Kod XML/HTMLSalin kandungan ke papan keratan

1. var kanvas = dokumen.getElementById('canvas'); >
jika (canvas.getContext) {
var
3. konteks = kanvas.getContext('2d'); // Lebar garisan
konteks.lineWidth
5. = 4 // Warna berus
context.strokeStyle
7. = 'merah' // Warna isian
context.fillStyle
9. = "merah" // Jenis penutup baris
10.  
context.lineCap
11. = 'punggung'; // bulat, segi empat sama  // Mulakan laluan
12. context.beginPath();
13. // Titik permulaan
14. context.moveTo(10,10);
// Titik tamat
context.lineTo(150,50);
16. // Melukis
17. context.stroke();
18. ｝
 
20. Segi empat tepat

Kod XML/HTML
Salin kandungan ke papan keratan

var kanvas

=

1. dokumen.getElementById('canvas'); > jika (canvas.getContext) { context.beginPath();
context.strokeRect(10,10,70,40);
2. // Satu lagi cara segi empat tepat
3. context.rect(10,10.70,40);
context.stroke();
 
// segi empat tepat pepejal
context.beginPath();
context.fillRect(10,10,70,40);
8. // Segi empat tepat pepejal cara lain
9. context.beginPath();
10. context.rect(10,10,70,40);
context.fill();
｝
13.  
Bulat
15. Kod XML/HTMLSalin kandungan ke papan keratan
16. 1. var kanvas = dokumen.getElementById('canvas'); >
    jika (canvas.getContext) {
    context.beginPath();
    // Koordinat tengah bulatan x, koordinat pusat bulatan Y, jejari lengkok, sudut permulaan, sudut penamat, sama ada mengikut lawan jam
    // Parameter keempat dan kelima ialah radian yang akan dihantar. Jika anda melukis sudut 30, anda perlu menukarnya kepada radian 30 * Math.PI / 180
    context.arc(100,100,70,0,130 * Math.PI / 180, benar);
    6. context.stroke();
    7. context.fill();
    8. ｝
     
    Sudut bulat

Kod XML/HTML

Salin kandungan ke papan keratan

var

1. kanvas = dokumen.getElementById('canvas'); > jika (canvas.getContext) {
context.beginPath();
context.moveTo(20,20);
3. context.lineTo(70,20);
// Lukis lengkok p1.x p1.y p2.x, jejari lengkok p2.y untuk laluan,
context.arcTo(120,30,120,70, 50);
5. context.lineTo(120,120);
context.stroke();
 
// Padam papan seni kanvas
context.beginPath();
context.fillRect(10,10,200,100);
10.  
11. // Padam kawasan
12. context.clearRect(30,30,50,50);
｝
14. Keluk Bezier Kuadratik
Kod XML/HTML
16. Salin kandungan ke papan keratan

var

kanvas

=

dokumen

.getElementById('canvas'); > jika (canvas.getContext) {

context.beginPath();
1. context.moveTo(100,100); context.quadraticCurveTo(20,50,200,20); context.stroke(); ｝
3. Keluk Bezier Kubik
Kod XML/HTML
5. Salin kandungan ke papan keratan
6. 1. var kanvas = dokumen.getElementById('canvas');   
   2. jika (canvas.getContext) {   
   3.      context.moveTo(68,130);   
   4.       var cX1 = 20;   
   5.       var cY1 = 10;   
   6.       var cX2 = 268;   
   7.       var cY2 = 10;   
   8.       var endX = 268;   
   9.       var endY = 170;   
   10.      context.bezierCurveTo(cX1, cY1, cX2, cY2, endX, endY);   
   11.      context.stroke();   
   12.         
   13.     // 利用klip指定绘图区域，指定绘图区域之后，只能在绘图区域中瓜莬>
   14.     // 绘制圆形   
   15.     context.arc(100,100,40,0, 360 * Math.PI/ 180 , true);   
   16.     // 限制区域   
   17.     context.clip();   
   18.     // 开始尝试绘制其他   
   19.     context.beginPath();   
   20.     context.fillStyle = 'biru muda';   
   21.     // 结果矩形并没有显示出来   
   22.     context.fillRect(0,0,300,150);   
   23. }  

画板进阶使用

Kod XML/HTML复制内容到剪贴板

1. var kanvas = dokumen.getElementById('canvas'); >
jika (canvas.getContext) {
var
3. konteks = kanvas.getContext('2d'); /*
4. * drawImage(imej,dx,dy)
5. * drawImage(imej,dx,dy,dw,dh)
6. * drawImage(imej,sx,sy,sw,sh,dx,dy,dw,dh
);
7. * objek lukisan imej
8. * Koordinat dx dy kanvas
9. * dw, dh menunjukkan kedudukan imej dalam kanvas yang hendak dilukis
10. * sw, sh mewakili kawasan imej yang hendak dilukis
11. * sx,sy Kedudukan permulaan lukisan yang hendak dilukis
12. */
13. var
imej
14. = dokumen.getElementById('img'); context.drawImage(imej, 0, 0); var
img
15. =
baharu
16. Imej(  img.src =
'imej/1.jpg'
17. ;  img.onload =
fungsi
18. (){                                             // drawImage
// Mula melukis dari 0,0 koordinat
// context.drawImage(img,0,0);
20. // Bermula dari 0, 0, lukis keseluruhan gambar hingga 100,100 panjang dan lebar
21. // context.drawImage(img, 0, 0, 100, 100);
// Tangkapan skrin, 50,50 hingga 100,100 Mula melukis dari 260,130 dan letakkan dalam kawasan 100,100 panjang dan lebar
22. // context.drawImage(img, 50, 50, 100,100, 260, 130, 100, 100);
                                           
23. // Gunakan getImageData dan putImageData untuk melukis gambar
25. context.drawImage(img, 10, 10);
// Dapatkan data piksel daripada papan seni
// Kedudukan mula, kedudukan tamat
var
28. imgData
=
29. konteks
.getImageData(50,50,100,100);
30. // Lukis data ke koordinat kedudukan yang ditentukan pada papan lukisan
31. context.putImageData(imgData,10,260);
// Lukis sebahagian daripada data piksel ke papan lukisan
context.putImageData(imgData,200,260,50,50,100,100);
33.                                            
// createImageData Cipta piksel
var
35. imgData
=
36. konteks.getImageData(50,50,200,200); // Cipta objek kosong dengan saiz yang ditentukan var
imgData01
37. =
konteks
38. .createImageData(imgData);                                                   untuk (i =
0
39. ; i
<
40. imgData01.width * imgData01.height * 4; i =4) { // Piksel merah imgData01.data[i 0] = 255; imgData01.data[i 1] = 0; imgData01.data[i 2] = 0;
imgData01.data[i 3] = 255;
41.                                             
                                                                     
42. context.putImageData(imgData01, 10, 260);
}  
}