canvas一周一练 -- canvas绘制中国银行标志(4)
2024-08-30 20:05:33
运行效果:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="drawing" width="" height="">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(, , , , *Math.PI, false);
context.closePath();
context.stroke();
context.fill();
context.save(); context.fillStyle = '#fff';
context.beginPath();
context.arc(, , , , *Math.PI, false);
context.closePath();
context.stroke();
context.fill(); //画外面的口(圆角矩形)
context.restore();
roundRec(context, , , , , , true, false);
//画里面的口
context.fillStyle = '#fff';
context.fillRect(, , , );
//画上下两竖
context.fillStyle = '#f00';
context.fillRect(, , , );
context.fillRect(, , , ); }
};
//画圆角矩形
var roundRec = function(context, x, y, width, height, radius, fill, stroke){
if(typeof stroke == 'undefined') {
stroke = true;
}
if(typeof radius == 'undefined') {
radius = ;
}
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>
最新文章
- Mssql迁移至Oracle 查询优化
- Android NDK环境搭建及调用JNI的简单步骤
- easyUI datagrid editor扩展dialog
- safari 回调中window.open无法执行
- android-tools-adb
- C++中debug和release的区别 . 转载
- 详解TCP和UDP数据段的首部格式
- JAVA文件中获取路径及WEB应用程序获取路径方法
- iOS证书详解--再转
- 使用XSLT实现Word下载
- SQL函数:用于将小写的数值翻译成大写的字符串
- 我使用过的Linux命令
- springMVC控制器,处理器,映射器,适配器
- java-IO流-其他流
- WINAPI方式在windows不同缩放比下取得正确的分辨率
- python的pyspider框架下爬虫
- urllib 学习二
- Illegalmixofcollations (utf8_unicode_ci,IMPLICIT) and (utf8_general_ci,IMPLICIT)foroperation &#39;= 连表查询排序规则问题
- Angular4 Ng 模块
- 机器学习【工具】:Numpy基础