html5的canvas图形绘制技术(详解HTML5 Canvas标签及基本使用)
类别:Web前端 浏览量:2759
时间:2021-10-07 00:07:16 html5的canvas图形绘制技术
详解HTML5 Canvas标签及基本使用HTML 5 <canvas> 标签定义和用法
<canvas> 标签定义图形,比如图表和其他图像。
<canvas> 标签只是图形容器,您必须使用脚本来绘制图形。
实例
如何通过 canvas 元素来显示一个红色的矩形:
<canvas id="myCanvas"></canvas> <script type="text/javascript"> var canvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100); </script>
< canvas>定义图形 基于状态进行绘制的
大多数 Canvas 绘图 API 都没有定义在 < canvas> 元素本身上,而是定义在通过画布的 getContext() 方法获得的一个“绘图环境”对象上
canvas.width canvas.height //指定canvas的宽高 canvas.getContext("2d"); //返回绘制的环境 context.moveTo(10,10) //从(10,10)开始画 context.lineTo(100,100) //从(10,10)开始画,画到(100,100) context.stroke() //开始绘制(线条) context.lineWidth=3 //设置线条的宽度 context.strokeStyle="#f00" 设置线条的颜色 stroke笔画的意思 context.fillStyle="rgb(255,0,0)";context.fill() //着色,,填充的颜色(颜色块) context.beginPath(); //定义一个新的路径 context.closePath(); //用在路径结束, 如果绘制的路径不是封闭的则会自动封闭起来,不写closrPath则不会封闭 //从坐标(20,30)开始,画一个64*36的矩形 context.fillRect(20,30,64,36); //rect矩形 //绘制弧和圆 context.arc( centetx,centery,radius, //圆心坐标及半径 startingAngle,enddingAngle, //从哪个弧度值开始,结束于哪个弧度值 anticlockwise=false //可选,,表示以顺时针开始绘制还是逆时针。 默认:顺时针。。true以逆时针绘制 ) //调用arc函数 //以(300,300)为圆心,200为半径画弧,从0画到1.5个PI context.arc(300,300,200,0,1.5*Math.PI) //全局变量 WINDOW_WIDTH=1024; WINDOW_HEIGHT=768; //调用全局变量 canvas.width=WINDOW_WIDTH; //render()函数 render(context); renderDigit(0,0,parseInt(hours/10),ctx)
总结
以上所述是小编给大家介绍的HTML5 Canvas标签及基本使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对开心学习网网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
您可能感兴趣
- html5图片上下滚动(HTML5 图片悬停放大的实现代码示例)
- html元素和属性的区别(HTML5 HTMLCollection和NodeList的区别详解)
- html5新增特性(总结html5自定义属性有哪些)
- html5添加背景(Html5实现首页动态视频背景的示例代码)
- html5开发的app(浅谈Html5页面打开app的一些思考)
- html5自动静音(html5录音功能实战示例)
- html5的文件类型声明(浅析HTML5中的download属性使用)
- html5实现上传图片预览
- html5 canvas绘图(使用html5 canvas绘制圆环动效)
- html5弹出输入框下拉菜单(HTML5输入框下拉菜单功能的示例代码)
- html5如何设置标签(HTML5中在title标题标签里设置小图标的方法)
- html5标签图片(HTML5图片层叠的实现示例)
- html5和css3最新特性(html5中使用hotcss.js实现手机端自适配的方法)
- html5表单元素自带验证功能(纯CSS3实现表单验证效果非常不错)
- html5横向滚动(解决HTML5中滚动到底部的事件问题)
- html5视频播放(使用HTML5加载音频和视频的实现代码)
- 怎么才可以财富自由(如何让自己实现财富自由)
- 为什么越来越多年轻人回农村(为什么越来越多年轻人回农村生活)
- 怎么快速学好英语(怎么快速学好英语初中)
- 中国留学生都是富二代吗()
- 我们现在吃的苹果是哪里来的 原来现代苹果引入中国仅有一百多年(我们现在吃的苹果是哪里来的)
- 买绿宝不能只挑黄绿色 菜农教你3招挑,个个皮薄肉脆,香甜爆汁(买绿宝不能只挑黄绿色)
热门推荐
- python读取文件怎么用(Python基础之文件读取的讲解)
- 单元格内容过多超出怎么办(单元格内文本显示超过单元格宽度的快速解决办法)
- css选择器知识汇总(在Less中写IE的css hack的方法介绍)
- dedecms搜索功能怎么设置详细(删除dedecms 5.7里面烦人的织梦链的方法)
- .NET中比较实用的开发工具
- php依赖注入对象注册(php依赖注入知识点详解)
- word-break、word-wrap、white-space的用法
- 阿里云ecs服务器挂了怎么办(阿里云服务器ECS不支持合并多块数据盘怎么办?)
- php小例子(PHP反射实际应用示例)
- phpstudy使用教程(phpstudy是什么)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9