学习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等效果是 ...
随机推荐
- 测试平台系列(2) 给Pity添加配置
给Pity添加配置 回顾 还记得上篇文章创立的「Flask」实例吗?我们通过这个实例,给根路由 「/」 绑定了一个方法,从而使得用户访问不同路由的时候可以执行不同的方法. 配置 要知道,在一个「Web ...
- 从零学脚手架(二)---初识webpack
在上一篇中,介绍了 webpack 的 entry . output . plugins 属性. 在这一篇,接着介绍其它配置属性. mode 这个属性在上一篇中使用过一次:设置 webpack 编译模 ...
- android分析之Binder 02
分析Java层的ServiceManager,看看Binder在Java层是如何实现的. public final class ServiceManager { private static fina ...
- Git常用命名
文字整理: git config - - 可以配置git的参数,可以使用 git config --list查看已经配置的git参数. 其中有三个级别的保存位置, –system(本系统) –glob ...
- certutil绕过
一般进内网过后我都会使用certutil下载文件,但在最近打一台内网机子的时候出现了certutil拒绝访问的情况,在本地搭建了一个环境尝试绕过certutil下载文件. 安装杀软更新到最新版本,开启 ...
- 极速精简 Go 版 Logstash
前言 今天来介绍 go-zero 生态的另一个组件 go-stash.这是一个 logstash 的 Go 语言替代版,我们用 go-stash 相比原先的 logstash 节省了2/3的服务器资源 ...
- Python常用时间转换
1 import time 2 import math 3 4 # 定义一些时间段的常量(秒) 5 TimeSec_Hour = 3600 6 TimeSec_Day = 86400 7 TimeSe ...
- java正则匹配${xxx} 排除单引号双引号内的内容，前提引号必须成对出现
public static void main(String[] a) { String wpp = "select 1, ${mark} '``this is, `/message22` ...
- JS基础学习第五天
作用域 作用域简单来说就是一个变量的作用范围.在JS中作用域分成两种: 1.全局作用域 直接在script标签中编写的代码都运行在全局作用域中全局作用域在打开页面时创建,在页面关闭时销毁.全局作用域中 ...
- 安装Dynamics CRM Report出错二
提示账户不是本地用户且不受支持 找到所需的服务,使用域管理员用户更改服务运行的账户.应用和确定 重新启动服务 重新运行安装向导,环境验证成功