如何使用canvas繪制中國(guó)銀行標(biāo)志

發(fā)布時(shí)間：2022-03-03 09:48:46 來(lái)源：億速云閱讀：121 作者：小新欄目：web開(kāi)發(fā)

這篇文章主要介紹了如何使用canvas繪制中國(guó)銀行標(biāo)志，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

　　<!DOCTYPE html>

　　<html>

　　<head>

　　</head>

　　<body>

　　<canvas id="drawing" width="600" height="400">A drawing of someing!</canvas>

　　//繪制中國(guó)銀行標(biāo)志

　　var drawBoc = function（）{

　　var drawing = document.getElementById（'drawing'）;

　　if（drawing.getContext） {

　　var context = drawing.getContext（'2d'）;

　　//畫(huà)外環(huán)

　　context.fillStyle = '#f00';

　　context.strokeStyle = '#f00';

　　context.beginPath（）;

　　context.arc（200, 200, 100, 0, 2*Math.PI, false）;

　　context.closePath（）;

　　context.stroke（）;

　　context.fill（）;

　　context.save（）;

　　context.fillStyle = '#fff';

　　context.beginPath（）;

　　context.arc（200, 200, 77, 0, 2*Math.PI, false）;

　　context.closePath（）;

　　context.stroke（）;

　　context.fill（）;

　　//畫(huà)外面的口（圓角矩形）

　　context.restore（）;

　　roundRec（context, 150, 160, 100, 80, 25, true, false）;

　　//畫(huà)里面的口

　　context.fillStyle = '#fff';

　　context.fillRect（170, 180, 60, 40）;

　　//畫(huà)上下兩豎

　　context.fillStyle = '#f00';

　　context.fillRect（190, 123, 20, 37）;

　　context.fillRect（190, 240, 20, 37）;

　　}

　　};

　　//畫(huà)圓角矩形

　　var roundRec = function（context, x, y, width, height, radius, fill, stroke）{

　　if（typeof stroke == 'undefined'） {

　　stroke = true;

　　}

　　if（typeof radius == 'undefined'） {

　　radius = 5;

　　}

　　context.beginPath（）;

　　context.moveTo（x+radius, y）;

　　context.lineTo（x+width-radius, y）;

　　context.quadraticCurveTo（x+width, y, x+width, y+radius）;

　　context.lineTo（x+width, y+height-radius）;

　　context.quadraticCurveTo（x+width, y+height, x+width-radius, y+height）;

　　context.lineTo（x+radius, y+height）;

　　context.quadraticCurveTo（x, y+height, x, y+height-radius）;

　　context.lineTo（x, y+radius）;

　　context.quadraticCurveTo（x, y, x+radius, y）;

　　context.closePath（）;

　　if（stroke） {

　　context.stroke（）;

　　}

　　if（fill） {

　　context.fill（）;

　　}

　　};

　　drawBoc（）;

　　</script>

　　</body>

　　</html>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何使用canvas繪制中國(guó)銀行標(biāo)志”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

向AI問(wèn)一下細(xì)節(jié)

如何使用canvas繪制中國(guó)銀行標(biāo)志

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽