溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了如何使用canvas繪制中國銀行標志，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="drawing" width="600" height="400">A drawing of someing!</canvas>
<script type="text/javascript">
//繪制中國銀行標志
var drawBoc = function（）{
var drawing = document.getElementById（'drawing'）;
if（drawing.getContext） {
var context = drawing.getContext（'2d'）;
//畫外環
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（）;
//畫外面的口（圓角矩形）
context.restore（）;
roundRec（context, 150, 160, 100, 80, 25, true, false）;
//畫里面的口
context.fillStyle = '#fff';
context.fillRect（170, 180, 60, 40）;
//畫上下兩豎
context.fillStyle = '#f00';
context.fillRect（190, 123, 20, 37）;
context.fillRect（190, 240, 20, 37）;
}
};
//畫圓角矩形
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>
感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何使用canvas繪制中國銀行標志”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
