学习Canvas绘图与动画基础 canvas入门（一）
一、创建canvas
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7
8 <body>
9 <canvas id="canvas" width="1024" height="768" style="border:1px solid #aaa; display:block;margin:30px auto;"></canvas>
10 <!--
11 说明：
12 1.不建议使用css给canvas设置width和height,因为canvas不仅有画布显示的大小，还包括它内里的显示的图画的分辨率的大小
13 2.注意width和height不加单位px
14 -->
15 </body>
16 </html>
一般有两部分组成：HTML和Javascript
HTML
<canvas id="canvas"></canvas>
Javascript
1 var canvas=document.getElementByid('canvas');
2 var context=canvas.getContext('2d');
3 //使用context进行绘制
举例：
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7
8 <body>
9 <canvas id="canvas" style="border:1px solid #aaa; display:block;margin:30px auto;">
10 当前浏览器不支持Canvas,请更换浏览器
11 </canvas>
12 <script>
13 var canvas=document.getElementById('canvas');
14 canvas.width=1024;
15 canvas.height=768;//也可以在这里设置width和height
16 var context=canvas.getContext('2d');
17 //使用context进行绘制
18 </script>
19 <!--
20 说明：
21 1.要考虑浏览器的兼容问题，在canvas标签中进行提示，当浏览器支持canvas时，里面的文字会被忽略的
22 2.对浏览器兼容的判断也可在js中进行。判断在下面代码块中进行展示
23 -->
24 </body>
25 </html>
用js提示兼容性
1 <script>
2 var canvas=document.getElementById('canvas');
3 canvas.width=1024;
4 canvas.height=768;//也可以在这里设置width和height
5
6 if(canvas.getContext("2d")){
7 var context=canvas.getContext('2d');
8 //使用context进行绘制
9 }else{
10 alert('当前浏览器不支持Canvas,请更换浏览器后再试')
11 }
12 </script>
学习Canvas绘图与动画基础 canvas入门（一）的更多相关文章
- 学习Canvas绘图与动画基础 制作弧和圆（五）
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...
- 学习Canvas绘图与动画基础 绘制多条路径（四）
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...
- 学习Canvas绘图与动画基础 为多边形着色（三）
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...
- 学习Canvas绘图与动画基础 绘制直线（二）
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...
- 炫丽的倒计时效果Canvas绘图与动画基础
前言 想要在自己做的网页中,加入canvas动画效果,但是发现模板各种调整不好,觉得还是要对canvas有所了解,才可以让自己的网页变得狂拽炫酷吊炸天! 一.绘制基础 1 <!DOCTYPE h ...
- canvas-炫丽的倒计时效果Canvas绘图与动画基础
canvas 是基于转台来绘制的 来了解一下canvas的浏览器兼容性问题,如下图所示.(截图自can i use) tips:刚刚拿去ie8下测了一下,什么反应都没有,提前设定好的,如果该浏览器不支 ...
- 【HTML5】炫丽的时钟效果Canvas绘图与动画基础练习
源自慕课网 效果如下: 全部代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- >炫酷的计时器效果Canvas绘图与动画<
>炫丽的计时器效果Canvas绘图与动画< 虽然我是学习java的,但是因为最近使用html5的关系,多学习了一下前端知识. 现在,我要介绍的计时器是十分炫酷的,使用画布完成. 喜欢htm ...
- WPF学习之绘图和动画
如今的软件市场,竞争已经进入白热化阶段,功能强.运算快.界面友好.Bug少.价格低都已经成为了必备条件.这还不算完,随着计算机的多媒体功能越来越强,软件的界面是否色彩亮丽.是否能通过动画.3D等效果是 ...
随机推荐
- GTID介绍
从MySQL5.6开始增加GTID这个特性,Global Transaction ID,全局事务ID,用来强化主从数据库的一致性,故障恢复,以及容错能力,来替代传统的人工的主从复制: 有了GTID,在 ...
- C#开发BIMFACE系列38 网页集成开发2：审图系统中的模型或图纸批注
系列目录 [已更新最新开发文章,点击查看详细] 在运维或协同的场景中,经常需要对模型或图纸进行批注,及时记录已发现的问题并交给相关负责的人员. 在开始实现功能之前,先了解一下BIMFACE中有 ...
- HDU_3746 Cyclic Nacklace 【KMP的应用】
一.题目 HDU3746 二.分析 KMP比较好解决的一个问题:如果求一个串中的循环节? 仔细回想KMP的用法,重点是next数组,相当于就是后缀和前缀的比较,那么不正是方便了我们确定循环节? 如果以 ...
- solr简明教程
文章目录 安装 启动 创建core 配置core索引MySQL数据 3.2.1 3.2.2 3.2.3 测试定时更新 五.配置中文分词 SolrJ 操作索引的增.删.查 七.通过SolrJ对MySQL ...
- ajax函数
使用三个函数是按ajax请求的处理 1.$.ajax() jQuery中实现ajax的核心函数 2.$.post() 使用post方式做ajax请求 3.$.get 使用get方式做ajax请求 $. ...
- 19. 一文搞懂 Go Modules 前世今生及入门使用
Hi,大家好. 我是明哥,在自己学习 Golang 的这段时间里,我写了详细的学习笔记放在我的个人微信公众号 <Go编程时光>,对于 Go 语言,我也算是个初学者,因此写的东西应该会比较适 ...
- IPFS挖矿的成本有哪些？
IPFS作为区块链新贵,近来风头一时无量.截止3月9日,Filecoin以257亿的流通市值超越门罗币,稳居区块链流通排行榜. 无论什么投资,其门槛一定在成本.今天就和大家细说投资市面上常见实体矿机的 ...
- 获得PyInstaller打包exe的py源码
参考链接:https://laucyun.com/33359ed9f725529ac9b606d054c8459d.html way1:pyi-archive_viewer 提取pyc,uncomp ...
- FFMPEG编译问题记录
一.ffmpeg下载与配置 下载地址 FFmpeg/FFmpeg (https://github.com/FFmpeg/FFmpeg) ~$ git clone https://github.com/ ...
- 盘点 Django 展示可视化图表的多种方式（建议收藏）
1. 前言 大家好,我是安果! 使用 Django 进行 Web 开发时,经常有需要展示图表的需求,以此来丰富网页的数据展示 常见方案包含:Highcharts.Matplotlib.Echarts. ...