js+canvas简单绘制圆圈的方法
更新时间：2016年01月28日 11:36:23 作者：m1870164
这篇文章主要介绍了js+canvas简单绘制圆圈的方法,涉及JavaScript调用canvas组件实现简单图形绘制的相关技巧,需要的朋友可以参考下
本文实例讲述了js+canvas简单绘制圆圈的方法。分享给大家供大家参考，具体如下：
运行效果截图如下：
具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>canvas画圆圈</title>
<script type="text/javascript" >
function drawCircle(id){
var canvas = document.getElementById(id);
if(canvas ) {
var context = canvas.getContext("2d");
context.fillStyle = "gray";
context.strokeStyle = "black";
context.fillRect(0, 0, 400, 400);
context.beginPath();
context.arc(100, 100, 50, 0, Math.PI*2, true);
context.closePath();
context.fillStyle = "green";
context.fill();
} else {
return;
}
}
window.onload = function () {
drawCircle("canvas");
}
</script>
</head>
<body>
<canvas id="canvas" width="400" style="background:red;" height="400"></canvas>
<hr />
</body>
</html>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript动画特效与技巧汇总》及《JavaScript运动效果与技巧汇总》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
Bootstrap 工具提示（Tooltip）插件 当您想要描述一个链接的时候，工具提示（Tooltip）就显得非常有用。这篇文章通过实例代码给大家介绍bootstrap的工具提示功能，需要的朋友参考下吧2017-05-05
这篇文章主要介绍了Java File类的常用方法总结,本文讲解了File类的常用方法,并对一些方法给出了代码示例,需要的朋友可以参考下2015-03-03
本文介绍一下js如何高效来拼装字符串的方法，希望大家看了以后多用效率高的代码，不要让客户端浏览器执行的太慢，提高用户体验。2010-04-04
layui 监听select选择 获取当前select的ID名称方法
今天小编就为大家分享一篇layui 监听select选择 获取当前select的ID名称方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要介绍了JS基于面向对象实现的拖拽库,以实例形式分析了JavaScript设置水平、垂直拖拽及限制拖拽范围的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
今天小编就为大家分享一篇解决Layui数据表格显示无数据提示的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
sort方法在我们的日常开发中是经常使用的，sort方法一般是用来对数组进行排序的，但是你是否知道sort方法默认是按什么方式排序的呢？下面就和我一起来深入了解sort方法吧2023-05-05
省略号,作为一种常见的文本处理方式,在很多情况下都十分常见,特别是当我们需要在省略号后面添加额外文字时,本文为大家介绍了使用JavaScript实现文本收起展开功能的相关方法,希望对大家有所帮助2024-04-04
这篇文章主要介绍了webpack+express实现文件精确缓存的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
这篇文章主要为大家详细介绍了js点击返回跳转到指定页面实现过程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-04-04
最新评论