学习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等效果是 ...
随机推荐
- 泛微OA 多版本存在命令执行
参考 https://blog.csdn.net/qq_41770175/article/details/102821349 https://www.linktrust.net/oday/471.ht ...
- redis集群（redis_cluster）
一.为什么要使用redis-cluster? 1.数据并发问题 2.数据量太大 新浪微博作为世界上最大的redis存储,就超过1TB的数据,去哪买这么大的内存条?各大公司有自己的解决方案,推出各自的集 ...
- Qt update刷新之源码分析(三)
大家好,我是IT文艺男,来自一线大厂的一线程序员 上次视频给大家从源码层面剖析了Qt刷新事件(QEvent::UpdateRequest)的处理流程,这次视频主要从源码层面剖析对刷新事件的进一步处理, ...
- python基础学习之类
面向对象和面向过程 面向过程:以吃饭为例,即为 煮饭.洗菜.洗碗.切菜.炒菜.出锅.吃饭面向对象:目标对象做完,直接吃疑问点:1.面向对象就是把过程用函数封装起来,随时调用?:2.面向过程就是每次都把 ...
- socket 之send和recv原理剖析
认识TCP socket的发送缓冲区和接收缓冲区 当创建一个TCP socket对象的时候会有一个发送缓冲区和一个接收缓冲区,相当与内存中的一片空间 send原理剖析 send是不是直接把数据发送给服 ...
- Anchor-Free总结
目录 Anchor-Free综述 一. CornerNet 1.1 概述 1.2 模块介绍 1.2.1 Heatmap 1.2.2 Offset 1.2.3 Grouping Corners 1.2. ...
- E - Recursive sequence HDU - 5950 （矩阵快速幂）
题目链接:https://vjudge.net/problem/HDU-5950 思路: 构造矩阵,然后利用矩阵快速幂. 1 #include <bits/stdc++.h> 2 #inc ...
- 模拟实现AMD模块化规范
目录 引子 再谈什么是闭包(闭包的产生)? 词法作用域 回到闭包 利用闭包编写模块 实现AMD模块化规范 写在最后 引子 本文最后的目的是模拟实现AMD模块化规范,而写下本文的原因是今天阅读到了< ...
- 攻防世界 reverse secret-string-400
secret-string-400 school-ctf-winter-2015 解压文件得到html和js文件 Task.html <html> <head> <tit ...
- 搞懂 ZooKeeper 集群的数据同步
本文作者:HelloGitHub-老荀 Hi,这里是 HelloGitHub 推出的 HelloZooKeeper 系列,免费开源.有趣.入门级的 ZooKeeper 教程,面向有编程基础的新手. 项 ...