详解HTML5 Canvas标签及基本使用


Posted in HTML / CSS onJanuary 10, 2020

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标签及基本使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
css背景图片的背景裁切、背景透明度、背景变换等效果运用
Dec 24 HTML / CSS
CSS3的一个简单导航栏实现
Aug 03 HTML / CSS
CSS3常用的几种颜色渐变模式总结
Nov 18 HTML / CSS
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
Dec 20 HTML / CSS
用CSS3实现无限循环的无缝滚动的示例代码
Nov 01 HTML / CSS
详解CSS3实现响应式手风琴效果
Jun 10 HTML / CSS
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
Jan 27 HTML / CSS
html5中监听canvas内部元素点击事件的三种方法
Apr 28 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
Jan 09 HTML / CSS
HTML5验证以及日期显示的实现详解
Jul 05 HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
Apr 26 HTML / CSS
如何避免常见的6种HTML5错误用法
Nov 06 HTML / CSS
HTML5自定义mp3播放器源码
Jan 06 #HTML / CSS
html5 canvas手势解锁源码分享
Jan 07 #HTML / CSS
HTML5自定义视频播放器源码
Jan 06 #HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
Jan 03 #HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
Jan 03 #HTML / CSS
使用canvas实现黑客帝国数字雨效果
Jan 02 #HTML / CSS
HTML5中外部浏览器唤起微信分享
Jan 02 #HTML / CSS
You might like
php5.3提示Function ereg() is deprecated Error问题解决方法
2014/11/12 PHP
PHP上传图片时判断上传文件是否为可用图片的方法
2016/10/20 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
Web版彷 Visual Studio 2003 颜色选择器
2007/01/09 Javascript
jQuery UI AutoComplete 自动完成使用小记
2010/08/21 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
jQuery实现可展开折叠的导航效果示例
2016/09/12 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
2017/05/22 Javascript
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
js实现简单扫雷
2020/11/27 Javascript
用Python编写生成树状结构的文件目录的脚本的教程
2015/05/04 Python
python比较2个xml内容的方法
2015/05/11 Python
Python爬取qq music中的音乐url及批量下载
2017/03/23 Python
Python编程给numpy矩阵添加一列方法示例
2017/12/04 Python
Python使用requests及BeautifulSoup构建爬虫实例代码
2018/01/24 Python
python使用tensorflow保存、加载和使用模型的方法
2018/01/31 Python
python如何让类支持比较运算
2018/03/20 Python
python3.4.3下逐行读入txt文本并去重的方法
2018/04/29 Python
解决python中 f.write写入中文出错的问题
2018/10/31 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
python利用多种方式来统计词频(单词个数)
2019/05/27 Python
Python实现使用dir获取类的方法列表
2019/12/24 Python
django rest framework serializers序列化实例
2020/05/13 Python
python 获取字典特定值对应的键的实现
2020/09/29 Python
使用分层画布来优化HTML5渲染的教程
2015/05/08 HTML / CSS
Wallis官网:英国女装零售商
2020/01/21 全球购物
加拿大服装和鞋类零售商:Mark’s
2021/01/04 全球购物
资产经营总监岗位职责范文
2013/12/01 职场文书
女儿十岁生日答谢词
2014/01/27 职场文书
电信营业员岗位职责
2015/04/14 职场文书
2015秋季新学期开学寄语
2015/05/28 职场文书
2019年房屋委托租赁合同范本(通用版)!
2019/07/17 职场文书
SQL之各种join小结详细讲解
2021/08/04 MySQL
使用python创建股票的时间序列可视化分析
2022/03/03 Python
直播实况, OMG破敌三路五十分钟大战神技局摩托车
2022/04/01 DOTA