学习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等效果是 ...
随机推荐
- OWASP TOP 10 详解
OWASP--开放式web应用程序安全项目 参考文献:袁鸣凯．OWASP Top 10十大风险 – 10个最重大的Web应用风险与攻防．2016-9-18． https://blog.csdn.n ...
- iOS 面试秘籍全套
栏目将持续更新--请iOS的小伙伴关注! (答案不唯一,仅供参考,文章最后有福利) iOS面试题大全(上) iOS面试题大全(下) 目录: iOS面试题:Run Loop iOS面试题:性能优化 ...
- Win 10 下Pipenv源码安装 odoo12
因为,本身电脑已经安装odoo8,9,10等odoo的版本,当时,没有考虑是直接是统一的环境很配置. 现在,在odoo11的环境下,需要Python 3的语言环境可以很好地支持odoo11的功能,所以 ...
- L3-021 神坛 （叉积排序+向量积求面积）
题目链接 https://pintia.cn/problem-sets/994805046380707840/problems/994805046577840128 题意:给定n个点求三角形最小面积: ...
- codefoces B - Phoenix and Beauty
原题链接:https://codeforc.es/problemset/problem/1348/B 题意:告诉我们一个数组及其长度和k,判断是否可以构造一个新数组使得每K段长度和都相等. 思路:首先 ...
- python3 中is和==的区别
is 身份运算符,用来判断对象是否属于同一地址 (python内置函数id() 可以返回对象地址) == 比较运算符,用于判断值是否相同
- 创建Maven父子项目以及它们的优点
此文引用:https://blog.csdn.net/zxl8876/article/details/104180133 创建maven父子项目 第一步创建父项目: 新建一个普通的maven项目 删除 ...
- 敏捷史话（十一）：敏捷宣言“间谍”——Steve Mellor
Steve Mellor 是敏捷宣言的签署人之一,他自称是作为" 间谍"去参加雪鸟会议的. 起初收到会议邀请时,Steve 非常惊讶,因为他所做的工作一直都是关于建模方面的,很少将 ...
- 【Azure Developer】Azure Graph SDK获取用户列表的问题: SDK中GraphServiceClient如何指向中国区的Endpoint：https://microsoftgraph.chinacloudapi.cn/v1.0
问题描述 想通过Java SDK的方式来获取Azure 门户中所列举的用户.一直报错无法正常调用接口,错误信息与AAD登录认证相关,提示tenant not found. 想要实现的目的,通过代码方式 ...
- 02-MySQL主要配置文件
一.二进制日志log-bin 作用:主从复制 二.错误日志 log-err 默认关闭,记录严重的警告和错误信息,每次启动和关闭的详细信息 三.慢查询日志log 默认关闭,记录查询的sql语句,如果开启 ...