canvas使用注意点
1、canvas中文教程https://developer.mozilla.org/zh-CN/docs/Canvas_tutorial
2、canvas默认宽高是300、150,为避免异常,最好使用显示属性添加而不通过css来添加宽高
3、在canvas标签内部添加不支持canvas标签的浏览器的说明
4、通过下面的js代码也能判断浏览器是否支持canvas
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}
5、canvas只支持一种基本形状的绘制,即矩形,但是其它图形都可以通过canvas路径来绘制
6、绘制矩形有四个函数:rect、fillRect、strokeRect和clearRect
7、beginPath的作用用来开始一个新的路径层,如果不加就表示在原来路径层上绘制,下面两段代码效果是完全不一样的,第一段代码显示两条红线,第二段代码显示一条黑线和一条红线
var ctx = document.getElementById('cvs').getContext('2d');
ctx.beginPath();
ctx.moveTo(100.5,20.5);
ctx.lineTo(200.5,20.5);
ctx.stroke();
ctx.moveTo(100.5,40.5);
ctx.lineTo(200.5,40.5)
ctx.strokeStyle = '#f00';
ctx.stroke();
var ctx = document.getElementById('cvs').getContext('2d');
ctx.beginPath();
ctx.moveTo(100.5,20.5);
ctx.lineTo(200.5,20.5);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(100.5,40.5);
ctx.lineTo(200.5,40.5)
ctx.strokeStyle = '#f00';
ctx.stroke();
8、如果不需要路径闭合,closePath可以不用,如果使用了fill则路径则会自动闭合,不需要再使用closePath了
9、只要有足够的耐性是完全可以利用贝塞尔曲线绘制任何图形的
10、二次方曲线在火狐下存在bug,因此可以利用三次方曲线代替二次方曲线使用
11、图像(如 PNG,GIF,JPEG等)都可以引入到 canvas 中,而且其它的 canvas 元素也可以作为图像的来源
12、下面是基本的canvas图片绘制代码,其中 image
是 image 或者 canvas 对象,x
和 y 是其在目标 canvas 里的起始坐标
drawImage(image, x, y)
下面一段代码表示缩放图片,width和height表示缩放的尺寸
drawImage(image, x, y, width, height)
下面一段代码表示剪切图片,第一个参数和其它的是相同的,都是一个图像或者另一个 canvas 的引用。其它8个参数中分别表示图片中裁减的起始x坐标,图片中裁减的起始y坐标,裁减区域宽度,裁减区域高度,所画位置x坐标,所画位置y坐标,所画图形宽度,所画图形高度,裁剪区域的尺寸是可以和所画图形的尺寸不一样的,此时会缩放到所画图片的尺寸
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
13、strokeStyle
是用于设置图形轮廓的颜色,而 fillStyle
用于设置填充颜色。color
可以是表示 CSS 颜色值的字符串,渐变对象或者图案对象。默认情况下,线条和填充颜色都是黑色(CSS 颜色值 #000000)。
14、图像透明度可以用globalAlpha = transparency value或者rgba颜色值来表示
15、lineWidth 属性设置当前绘线的粗细,为解决1px线宽bug问题,采用+0.5的方式来解决
16、lineCap
属性最左边的线用了默认的 butt
。可以注意到它是与辅助线齐平的。中间的是 round
的效果,端点处加上了半径为一半线宽的半圆。右边的是 square
的效果,端点处加上了等宽且高度为一半线宽的方块
17、lineJoin
属性这里我同样用三条折线来做例子,分别设置不同的 lineJoin
值。最上面一条是 round
的效果,边角处被磨圆了,圆的半径等于线宽。中间和最下面一条分别是 bevel 和 miter 的效果。当值是 miter
的时候,线段会在连接处外侧延伸直至交于一点,延伸效果受到下面将要介绍的 miterLimit
属性的制约
18、save
和 restore
方法是用来保存和恢复 canvas 状态的,都没有参数。Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。Canvas 状态是以堆(stack)的方式保存的,每一次调用 save
方法,当前的状态就会被推入堆中保存起来。每一次调用 restore
方法,上一个保存的状态就从堆中弹出,所有设定都恢复。
19、transform(1, 0, 0, 1, 0, 0)参数分别表示水平方向缩放、水平方向旋转(顺时针)、垂直方向旋转(逆时针)、垂直方向缩放、水平方向偏移量、垂直方向偏移量
setTransform(1, 0, 0, 1, 0, 0)表示重置前一个变换矩阵然后构建新的矩阵,参数作用同上
rotate(angle),(一个半径等于1弧度,2πr/r=弧度即360=2π,即1=π/180)
20、动画其实就是不断清空画板(clearRect()),然后重绘
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上的,与 ...
随机推荐
- 如何强化 TCP/IP 堆栈
TCP/IP 是一种本质上不安全的协议.但是,Windows 2000 实现可以使您配置其操作以防止网络的拒绝服务攻击.默认情况下,本文中所涉及的一些项和值可能并不存在.在这些情况下,请创建该项.值或 ...
- JForum 2.19源码部署到eclipse
前两天在研究免费论坛,通过oschina和相关的文档查阅,最终选择了jforum,首先他是java写的,其次方便二次开发,而且有些论坛的源码都已经不在维护了,jforum最近几个月还是有更新的,但是从 ...
- Java基础知识强化之网络编程笔记10:TCP之客户端读取文本文件服务器控制台输出
1. TCP之客户端读取文本文件服务器控制台输出 (1)客户端:(发送数据到服务端) package cn.itcast_10; import java.io.BufferedReader; impo ...
- iOS之用xib给控件设置圆角、边框效果
xib中为各种控件设置圆角 通过代码的方式设置 @interface ViewController () @property (weak, nonatomic) IBOutlet UIView *my ...
- ubuntu on win VS ubuntu(virtual box)VS Cygwin
执行命令粗略估计执行时间: date --rfc-3339='ns';seq 100000000 | grep 8 | wc -w; date --rfc-3339='ns' ubuntu 14.04 ...
- [转]Best way to sort a DropDownList in MVC3 / Razor using helper method
本文转自:http://stackoverflow.com/questions/7223185/best-way-to-sort-a-dropdownlist-in-mvc3-razor-using- ...
- 关于Eclispe插件开发起步(一)
Eclipse中三个最吸引人的地方是: 第一是它创新性的图形API,就是SWT/JFace. 第二是它的插件机制. 第三个是利用它的插件机制开发众多功能强大的插件. 插件成就了Eclipse的今天.E ...
- 关于datalist
http://www.cnblogs.com/shipfi/archive/2009/10/19/1585705.html
- JavaScript高级程序设计(第三版)学习,第一次总结
Array类型 var arr = []; arr.length; //返回数组元素个数 改变length可以动态改变数组大小 检测数组 instanceof可以检测某个对象是否是数组,限制:只能是一 ...
- 用jsp方式通知客户端下载文件
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...