如何使用canvas绘制中国银行标志
这篇文章主要介绍了如何使用canvas绘制中国银行标志,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
//绘制中国银行标志
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();
感谢你能够认真阅读完这篇文章,希望小编分享的"如何使用canvas绘制中国银行标志"这篇文章对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,更多相关知识等着你来学习!