学习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等效果是 ...
随机推荐
- 致被职场PUA的打工人
作为打工人,除了每天面对着各种繁琐的工作,还要被动接受上级或多或少的PUA,实在是难上加难,甚至有人想不开而自杀.网络上最近流行了一个词:职场PUA,赋予了这种现象一个正式的名字. 职场PUA指的是职 ...
- VirtualBOX 虚拟机 FreeBSD配置
pkg装virtualbox-ose-additions, 再将 Section "Device"Identifier "Card0"Driver " ...
- 任务4 PHP扩展模块安装
/usr/local/php/bin/php -m //如何查看PHP加载了哪些模块 #cd /usr/local/src #wget http://pecl.php.net/get/redis-2 ...
- get和post的区别主要有以下几方面
1.url可见性: get,参数url可见: post,url参数不可见 2.数据传输上: get,通过拼接url进行传递参数: post,通过body体传输参数 3.缓存性: get请求是可以缓存的 ...
- Spring(一):Spring概述及相关概念
Spring简介 Spring主要作用是用来解耦,降低代码之间的耦合度.根据功能的不同,可以将系统的代码分为主业务逻辑与系统服务逻辑. 主业务逻辑之间代码联系紧密,相互调用较多,复用性相对较低: 系统 ...
- Java关于整型类缓存[-128，127]之间的数字
我们在学习Java的包装类Integer.Long的时候可能会遇到这个问题: ①Integer a = 500;// Integer a = Integer.valueOf(500); 等价于上面的 ...
- 【linux】系统编程-8-Socket
目录 前言 11. 套接字 11.1 Socket简介 11.2 socket() 11.3 bind() 11.4 connect() 11.5 listen() 11.6 accept() 11. ...
- Java例题_17 猴子偷桃问题
1 /*17 [程序 17 猴子吃桃问题] 2 题目:猴子吃桃问题 3 猴子第一天摘下若干个桃子,当即吃了一半,还不瘾,又多吃了一个 4 第二天早上又将剩下的桃子吃掉一半,又多吃了一个. 5 以后每天 ...
- 历史性突破：使用 .net core 日处理消息量超过 1.7 万条！
业余时间用 .net core 写了一个在线客服系统.并在博客园写了一个系列的文章,写介绍这个开发过程: .net core 和 WPF 开发升讯威在线客服系统:目录 https://blog.she ...
- Elasticsearch 基础介绍
# Elasticsearch简介 ## 基础概念 Elasticsearch由Shay banon在2004年进行初步开发,并且在2010年2月发布第一个版本. 此后Shay banon在2 ...