How to use canvas to draw the logo of Bank of China
This article mainly introduces how to use canvas to draw the logo of the Bank of China, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.
A drawing of someing!
/ / draw the logo of the Bank of China
Var drawBoc = function () {
Var drawing = document.getElementById ('drawing')
If (drawing.getContext) {
Var context = drawing.getContext ('2d')
/ / draw the outer ring
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 ()
/ / draw the outside mouth (rounded rectangle)
Context.restore ()
RoundRec (context, 150,160,100,80,25, true, false)
/ / the mouth in the painting
Context.fillStyle ='# fff'
Context.fillRect (170,180,60,40)
/ / draw two verticals
Context.fillStyle ='# f00'
Context.fillRect (190,123,20,37)
Context.fillRect (190,240,20,37)
}
}
/ / draw a rounded rectangle
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 ()
Thank you for reading this article carefully. I hope the article "how to use canvas to draw the logo of the Bank of China" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!
