Lukisan asas
Kod XML/HTMLSalin kandungan ke papan keratan
- var kanvas = dokumen.getElementById('canvas'); >
jika (canvas.getContext) { -
var -
konteks = kanvas.getContext('2d');
// Lebar garisan
-
konteks.lineWidth-
= 4
// Warna berus
-
context.strokeStyle-
= 'merah'
// Warna isian
-
context.fillStyle-
= "merah"
// Jenis penutup baris
-
context.lineCap-
= 'punggung'; // bulat, segi empat sama
// Mulakan laluan
- context.beginPath();
- // Titik permulaan
- context.moveTo(10,10);
// Titik tamat -
context.lineTo(150,50);
- // Melukis
- context.stroke();
- ｝
-
- Segi empat tepat
Kod XML/HTML
Salin kandungan ke papan keratan
var kanvas
=
- dokumen.getElementById('canvas'); >
jika (canvas.getContext) {
context.beginPath();
context.strokeRect(10,10,70,40);
- // Satu lagi cara segi empat tepat
- context.rect(10,10.70,40);
context.stroke(); -
-
// segi empat tepat pepejal -
context.beginPath(); -
context.fillRect(10,10,70,40);
- // Segi empat tepat pepejal cara lain
- context.beginPath();
- context.rect(10,10,70,40);
context.fill(); -
｝ -
-
Bulat-
- Kod XML/HTMLSalin kandungan ke papan keratan
-
- 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);
- context.stroke();
- context.fill();
- ｝
-
Sudut bulat
Kod XML/HTML
Salin kandungan ke papan keratan
var
- kanvas = dokumen.getElementById('canvas'); >
jika (canvas.getContext) {
context.beginPath(); -
context.moveTo(20,20);
- 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);
- context.lineTo(120,120);
context.stroke(); -
-
// Padam papan seni kanvas -
context.beginPath(); -
context.fillRect(10,10,200,100);
-
- // Padam kawasan
- context.clearRect(30,30,50,50);
｝ -
-
Keluk Bezier Kuadratik
-
Kod XML/HTML- Salin kandungan ke papan keratan
-
var
kanvas
=
dokumen
.getElementById('canvas'); >
jika (canvas.getContext) {
context.beginPath(); -
context.moveTo(100,100);
context.quadraticCurveTo(20,50,200,20);
context.stroke();
｝
-
- Keluk Bezier Kubik
-
Kod XML/HTML- Salin kandungan ke papan keratan
-
- var kanvas = dokumen.getElementById('canvas');
- jika (canvas.getContext) {
- context.moveTo(68,130);
-
var cX1 = 20;
-
var cY1 = 10;
-
var cX2 = 268;
-
var cY2 = 10;
-
var endX = 268;
-
var endY = 170;
- context.bezierCurveTo(cX1, cY1, cX2, cY2, endX, endY);
- context.stroke();
-
-
// 利用klip指定绘图区域，指定绘图区域之后，只能在绘图区域中瓜莬>
- // 绘制圆形
- context.arc(100,100,40,0, 360 * Math.PI/ 180 , true);
- // 限制区域
- context.clip();
- // 开始尝试绘制其他
- context.beginPath();
- context.fillStyle = 'biru muda';
- // 结果矩形并没有显示出来
- context.fillRect(0,0,300,150);
- }
画板进阶使用
Kod XML/HTML
复制内容到剪贴板
- var kanvas = dokumen.getElementById('canvas'); >
jika (canvas.getContext) { -
var -
konteks = kanvas.getContext('2d');
/*
- * drawImage(imej,dx,dy)
- * drawImage(imej,dx,dy,dw,dh)
- * drawImage(imej,sx,sy,sw,sh,dx,dy,dw,dh
);
- * objek lukisan imej
- * Koordinat dx dy kanvas
- * dw, dh menunjukkan kedudukan imej dalam kanvas yang hendak dilukis
- * sw, sh mewakili kawasan imej yang hendak dilukis
- * sx,sy Kedudukan permulaan lukisan yang hendak dilukis
- */
- var
imej-
= dokumen.getElementById('img');
context.drawImage(imej, 0, 0);
var
img- =
baharu-
Imej(
img.src =
'imej/1.jpg'-
;
img.onload =
fungsi-
(){
// drawImage
// Mula melukis dari 0,0 koordinat -
// context.drawImage(img,0,0);
- // Bermula dari 0, 0, lukis keseluruhan gambar hingga 100,100 panjang dan lebar
- // 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
- // context.drawImage(img, 50, 50, 100,100, 260, 130, 100, 100);
- // Gunakan getImageData dan putImageData untuk melukis gambar
-
- context.drawImage(img, 10, 10);
// Dapatkan data piksel daripada papan seni -
// Kedudukan mula, kedudukan tamat -
var - imgData
= - konteks
.getImageData(50,50,100,100);- // Lukis data ke koordinat kedudukan yang ditentukan pada papan lukisan
- context.putImageData(imgData,10,260);
// Lukis sebahagian daripada data piksel ke papan lukisan -
context.putImageData(imgData,200,260,50,50,100,100);
-
// createImageData Cipta piksel -
var - imgData
= -
konteks.getImageData(50,50,200,200);
// Cipta objek kosong dengan saiz yang ditentukan
var
imgData01- =
konteks-
.createImageData(imgData);
untuk (i =
0- ; i
<-
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;
-
- context.putImageData(imgData01, 10, 260);
} -
} -
-
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
