HTML5——Canvas_01之【绘制圆形】

最新推荐文章于 2024-06-24 15:24:14 发布
最新推荐文章于 2024-06-24 15:24:14 发布
阅读量292 收藏
点赞数
分类专栏： Canvas Html5 文章标签： Canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Superstatus/article/details/80566062
版权
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html >

< head >
< meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" >
< title >绘制圆形 </ title >
< script >
function draw( id){
var canvas= document. getElementById( id); //获取id
if( canvas== null) //如果id为空就不画
{
return false;
}

var context= canvas. getContext( "2d"); //声明这个cavas是2d
context. fillStyle= "eeeeef"; //2d颜色
context. fillRect( 0, 0, 600, 700); //2d矩形宽600，长700
for( var i= 0; i<= 10; i++)
{
context. beginPath(); //准备画
context. arc( i* 25, i* 25, i* 10, 0, Math.PI* 2, true); //arc是画圆形
context. closePath(); //记得关闭
context. fillStyle= "rgba(255,0,0,0.25)"; //要画的颜色
context. fill();
}

}
</ script >
</ head >

< body onload= "draw(" canvas ");" >
< canvas id= "canvas" width= "600" height= "700" ></ canvas >
</ body >

</ html >
Superstatus
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5 —— canvas画布
impact_factor的博客
07-22 1027
canvas画布 画布：HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 绘制图形的过程 创建画布：使用html5中画布标签 <canvas id="id" width="宽度" height="高度"> </canvas> JavaScript中获取画布 document.getElementById('id')
HTML5 Canvas使用路径——绘制圆形
乞力马扎罗的雪CYF的博客
09-28 2089
HTML实现代码如下： function draw(id){ var canvas = document.getElementById("canvas"); if(canvas == null){ return false; }
HTML5——Canvas_04之【绘制渐变图形】
Superstatus的博客
06-04 217
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;&lt;html&gt;&lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; ch
HTML5——Canvas绘制曲线
weixin_45511236的博客
07-23 571
Canvas绘制曲线绘制曲线绘制圆形绘制弧形二次贝塞尔三次贝塞尔Canvas变形translate(x, y)rotate(angle)scale(x, y) 绘制曲线 角度与弧度的js表达式（相当高中的弧度制:radians=(Math.PI/180)*degrees 曲线 函数 圆形 arc(x, y, radius, startAngle, endAngle, anticlockwise) 弧形 arcTo(x1, y1, x2, y2, radius) 二次贝塞尔 quadr
HTML5——Canvas
Abbey_qi的博客
07-08 168
什么是 canvas? HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成. <canvas> 标签只是图形容器，您必须使用脚本来绘制图形。 你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。 浏览器支持 表格中的数字表示支持 <canvas> 元素的第一个浏览器版本号。 ...
HTML5(五)——Canvas API
最新发布
2401_84434237的博客
06-24 878
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
用html5新增标签——canvas实现烟花
m0_73737249的博客
11-08 739
用canva实现烟花特效
HTML5 —— canvas画布(1)
2401_84092456的博客
05-05 128
方向 | 绘图方向(顺时针、逆时针)，true表示逆时针，false表示顺时针(默认) |(4)线的路径：在同一个画布中添加再多的连线端点路径只有一条。butt ： 默认值，无端点形状，显示的是直线的方形边缘。arc(x,y,r,开始角,结束角,方向)| 开始角 | 开始的圆周率角度 || 结束角 | 结束的圆周率角度 || x,y | 圆心的坐标 || r | 圆的半径 |square：方形端点。| 参数 | 内容 |round：圆形端点。
使用 html5 canvas 绘制精美的图形,HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图...
weixin_33438811的博客
06-09 188
HTML5火的正热，最近有个想法也是要用到HTML的相关功能，所以也要好好学习一把。好好看了一下Canvas的功能，感觉HTML5在客户端交互的功能性越来越强了，今天看了一下Canvas绘图，下边是几个实例，记下以备后用。1、使用Canvas绘制直线：XML/HTML Code复制内容到剪贴板html>canvas{border:dashed2px#CCC}function$$(id)...
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
09-28
本文将深入探讨如何使用HTML5 Canvas绘制图形，通过八个实例来展示其功能。 1. **绘制直线** 要在Canvas上绘制直线，我们需要使用`moveTo()`方法设置起点，然后使用`lineTo()`方法指定终点。在示例中，我们首先...
Html5——Canvas实例（制作太阳地球月球三球联动动画）
09-23
在Canvas API中，我们可以使用`ctx.beginPath()`来开始一个新的路径，然后用`ctx.arc()`绘制圆形。例如，我们可以这样绘制太阳： ```javascript var sunRadius = 100; ctx.beginPath(); ctx.arc(400, 300, ...
利用HTML5中的Canvas绘制一张笑脸的教程
12-14
HTML5的Canvas是一个强大的网页图形绘制工具，它与文档对象模型（DOM）紧密关联，允许开发者使用JavaScript对HTML元素进行动态操作。Canvas元素是HTML5引入的一个重要特性，它本质上是一个矩形区域，用于在网页上...
网页模板——基于html5 canvas绘制发光的圆点动画特效源码.zip
11-24
"网页模板——基于html5 canvas绘制发光的圆点动画特效源码.zip"这个压缩包文件提供了一个实例，展示了如何利用Canvas API来实现一个发光的圆点动画特效。以下是关于这个知识点的详细解释。 首先，HTML5的Canvas是...
网页模板——基于html5 canvas绘制炫酷爆炸圆点背景动画特效源码.zip
11-24
这个"网页模板——基于html5 canvas绘制炫酷爆炸圆点背景动画特效源码"是一个利用HTML5 Canvas API实现的视觉效果，为网页提供了一个引人注目的背景动画。 首先，Canvas API是一个JavaScript接口，提供了基本的2D...
Html5——indexedDB数据库学习记录5之【利用索引获取数据】
Superstatus的博客
06-03 2258
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;&lt;html&gt;&lt;head&gt;    &lt;meta http-equiv="Content-Type" content="text/html; ch
Html5——indexedDB数据库学习记录2之【数据库的版本更新】
Superstatus的博客
06-03 1481
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;&lt;html&gt;&lt;head&gt;    &lt;meta http-equiv="Content-Type" content="text/html; ch
HTML5——Canvas_03之【使用bezierCurveTo绘制贝塞尔曲线】
Superstatus的博客
06-04 1349
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;&lt;html&gt;&lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; ch
Html5——indexedDB数据库学习记录6之【游标与index和游标结合】
Superstatus的博客
06-03 966
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;&lt;html&gt;&lt;head&gt;    &lt;meta http-equiv="Content-Type" content="text/html; ch
深入探索HTML5 Canvas绘图技术
"HTML5 Canvas——原生互动与网页动画" HTML5 Canvas 是一种在Web页面上进行动态图形绘制的API，它为开发者提供了强大的绘图能力，使得网页应用可以实现丰富的视觉效果和交互体验。Canvas API 通过JavaScript来操作...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值