1.什么是CANVAS

canvas是html5新增的画布元素，可以通过javascript来在画布上绘制图形，图标以及任何视觉性的图像。

2.canvas的用途

替代flash，做各种动态效果，做小游戏。

3.canvas的使用

使用canvas需要先在html页面中，存放一个canvas的元素。如下：

<!DOCTYPE html>
<html>

<head>

    <title></title>

</head>

<body>
　　<!-- canvas存在游览器兼容性问题，ie9及以下是不支持canvas元素的，如果在不支持的游览器上用到了canvas，它就会显示canvas中的这段文字 -->

    <canvas id="canvas" width="500" height="500">
　　　　当前的游览器版本过低，请更新游览器到最新版本
　　</canvas>
</body>

</html>

注意：在body中添加canvas元素的时候要先设置出canvas的属性width,height的数值，且width,height必须是元素的属性，不能是样式(style="widht:500px;height:500px"，这样设置会出现问题)。

var canvas = document.getElementById('canvas');　　// 获取到元素对象

var ctx = canvas.getContext('2d');　　// 根据元素对象获取到渲染上下文和它的绘画功能(2d)

4.canvas的坐标系

canvas的默认坐标系就是以canvas左上角为0,0点，向右是x正坐标，向左是x负坐标，向下是y正坐标，向上是y负坐标

4.canvas的简单案例

绘制矩形

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

    <canvas id="canvas" width="500" height="500"></canvas>

    <script type="text/javascript">

        var canvas = document.getElementById('canvas');

        var ctx = canvas.getContext('2d');

        ctx.rect(0,0,200,200);　　// 绘制一个起点是0，0，长宽都是200的矩形

        ctx.stroke();　　// 绘制线条，边框

    </script>

</body>

</html>

页面效果：

canvas基本使用的更多相关文章

html5 canvas常用api总结(三)--图像变换API
canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...
【探索】利用 canvas 实现数据压缩
前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...
简单入门canvas - 通过刮奖效果来学习
一 .前言一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...
获取Canvas当前坐标系矩阵
前言在我的另一篇博文 Canvas坐标系转换中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操作之后,怎么再知道当前矩阵数据状态呢. 具体代码首先请看下面的一 ...
Canvas坐标系转换
默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为x=0,y=0的点称作原点.在默认坐标系中,每一个点的坐标都是直接 ...
Canvas绘图之平移translate、旋转rotate、缩放scale
画布操作介绍画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数方法描 ...
用html5的canvas和JavaScript创建一个绘图程序
本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...
html5标签canvas函数drawImage使用方法
html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...
使用 JavaScript 和 canvas 做精确的像素碰撞检测
原文地址:Pixel accurate collision detection with Javascript and Canvas 译者:nzbin 我正在开发一个需要再次使用碰撞检测的游戏.我通常 ...
H5项目开发分享——用Canvas合成文字
以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...

随机推荐

Canvas转换为Blob对象并使用Ajax发送
Canvas转换为Blob对象并使用Ajax发送转换为Blob对象后,可以使用Ajax上传图像文件. 先从canvas获取dataurl, 再将dataurl转换为Blob对象 var dataur ...
memcache概念浅谈及名称混乱之区分
关于memcache这个现在应用广泛的组件,大大提高的网站的响应速度,也方便了程序开发缓存的应用.但是目前针对memcache,网上的资料大同小异,尤其基于LAMP的网站居多,php/pcel又有两 ...
Atitit.判断汉字的编码 regedit 注册表里面的reg_sz
Atitit.判断汉字的编码 regedit 注册表里面的reg_sz 1. 可以判断出是unicode编码1 2. 有下面分割ucs2 大头小偷编码1 3. 使用小偷编码测试1 4. 注册表里面的r ...
C#多线程方法同步
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
Linux高性能server编程——I/O复用
IO复用 I/O复用使得程序能同一时候监听多个文件描写叙述符.通常网络程序在下列情况下须要使用I/O复用技术: client程序要同一时候处理多个socket client程序要同一时候处理用户 ...
655. Big Integer Addition【easy】
Given two non-negative integers num1 and num2 represented as string, return the sum of num1 and num2 ...
Monotone Chain Convex Hull(单调链凸包)
Monotone Chain Convex Hull(单调链凸包)算法伪代码: //输入:一个在平面上的点集P //点集 P 按先x后y 的递增排序 //m 表示共a[i=0...m]个点,ans为 ...
PHP特性整合(PHP5.X到PHP7.1.x)
Buid-in web server内置了一个简单的Web服务器把当前目录作为Root Document只需要这条命令即可: php -S localhost:3300 也可以指定其它路径 php ...
Qt类反射机制
前言如何通过类名动态的创建对象(类反射),对于Java开发者来说一点也不陌生,当然Qt也提供了一个元对象系统(The Meta-Object System),通过这个系统我们可以动态的在运行时获 ...
yum安装的JDK的没有配置环境变量但是在/usr/bin下面都做了软链接
[root@st152 /usr/bin]# ll |grep javalrwxrwxrwx 1 root root 22 Nov 28 22:14 java -> /et ...

canvas基本使用