Bagaimana untuk menetapkan ketebalan berus dalam javascript

Dengan perkembangan teknologi Web, semakin ramai pembangun bahagian hadapan telah mula memberi perhatian kepada pengalaman pengguna, dan fungsi lukisan semakin digunakan secara meluas. Melaksanakan fungsi lukisan di Web tidak dapat dipisahkan daripada API lukisan yang disediakan oleh penyemak imbas, yang menetapkan ketebalan berus adalah salah satu fungsi asas. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk menetapkan ketebalan berus.

1. Apakah ketebalan berus?

Ketebalan berus merujuk kepada lebar garisan berus semasa melukis, juga dipanggil lebar garisan. Melaraskan ketebalan berus boleh menukar kesan visual grafik yang dilukis, menjadikan grafik yang dilukis lebih cantik dan realistik. Pada masa yang sama, menetapkan ketebalan berus juga merupakan kemahiran asas dalam lukisan Web.

2. Bagaimana untuk menetapkan ketebalan berus?

Menetapkan ketebalan berus dalam JavaScript boleh dicapai menggunakan atribut lineWidth dalam objek kanvas Kodnya adalah seperti berikut:

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

context.lineWidth = 5; //设置画笔粗细为5像素

Dalam kod di atas, kami mula-mula mendapatkan elemen kanvas. melalui kaedah getElementById, dan Gunakan kaedah getContext untuk mendapatkan konteks lukisan 2D. Kemudian, gunakan sifat lineWidth untuk menetapkan ketebalan berus Nilai sifat ini ialah lebar garisan. Di sini kami menetapkan berat berus kepada 5 piksel.

Perlu diambil perhatian bahawa apabila menetapkan ketebalan berus, penyemak imbas yang berbeza mungkin mempunyai kaedah pelaksanaan yang berbeza, jadi keserasian perlu dikendalikan semasa menggunakannya.

Berikut ialah kod pemprosesan keserasian untuk menetapkan ketebalan berus dalam penyemak imbas yang berbeza:

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

//获取浏览器厂商前缀
var vendorPrefix = (function() {
    var styles = window.getComputedStyle(document.documentElement, ''),
        pre = (Array.prototype.slice.call(styles).join('').match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o']))[1];
    return '-' + pre + '-';
})();

context.lineWidth = 5;

//兼容性处理，针对不同浏览器设置不同的前缀
context.lineWidth = vendorPrefix + 'line-width: 5px';

Dalam kod di atas, kami memperoleh awalan pengeluar penyemak imbas, Dan menggunakan awalan ini untuk tetapkan ketebalan berus untuk mencapai keserasian silang pelayar.

3. Contoh Demonstrasi

Untuk lebih memahami cara menetapkan ketebalan berus, kita boleh menggunakan contoh berikut untuk demonstrasi.

Pertama, buat elemen kanvas dan dua butang dalam HTML, kodnya adalah seperti berikut:

<canvas id="canvas" width="400" height="400"></canvas>
<button id="btn1">线条变细</button>
<button id="btn2">线条变粗</button>

Kemudian, ikat pengendali acara butang dalam JavaScript, kodnya adalah seperti berikut :

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

var lineWidth = 5; //初始画笔粗细为5像素

//绑定按钮事件处理程序
document.getElementById("btn1").onclick = function() {
    if(lineWidth > 1) {
        lineWidth -= 1; //每次减少1像素
        context.lineWidth = lineWidth;
    }
};
document.getElementById("btn2").onclick = function() {
    lineWidth += 1; //每次增加1像素
    context.lineWidth = lineWidth;
};

Dalam kod di atas, kami mula-mula mentakrifkan lineWidth pembolehubah dengan ketebalan berus awal 5 piksel dan menukar nilai pembolehubah dalam pengendali acara butang dengan menambah atau mengurangkan setiap kali secara dinamik tukar kesan Ketebalan berus.

Akhir sekali, tetapkan gaya elemen kanvas dalam CSS Kodnya adalah seperti berikut:

canvas {
    border: 1px solid #ccc;
}

Sekarang, kita boleh menukar ketebalan berus dengan mengklik butang dan pratonton kesannya dalam. masa sebenar. Untuk demonstrasi khusus, sila rujuk contoh berikut:

Garisan menjadi lebih tebal

var canvas = document. getElementById( "canvas");
var context = canvas.getContext("2d");

var lineWidth = 5; //Ketebalan berus awal ialah 5 piksel

// Butang ikat Pengendali acara
document.getElementById("btn1").onclick = function() {

if(lineWidth > 1) {
    lineWidth -= 1; //每次减少1像素
    context.lineWidth = lineWidth;
}

};
document.getElementById("btn2").onclick = function() {

lineWidth += 1; //每次增加1像素
context.lineWidth = lineWidth;

};