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上的,与 ...
随机推荐
-
安卓中AIDL的使用方法快速入门
1.AIDL是什么? AIDL全称是Android Interface Definition Language,即安卓接口定义语言. 2.AIDL是用来做什么的?(为什么要有AIDL) AIDL是用来 ...
-
Kafka深度解析,众人推荐,精彩好文!
作者: Jason Guo 背景介绍 Kafka简介 Kafka是一种分布式的,基于发布/订阅的消息系统.主要设计目标如下: 以时间复杂度为O(1)的方式提供消息持久化能力,并保证即使对TB级以上数据 ...
-
android中判断网络连接是否可用
一.判断网络连接是否可用 public static boolean isNetworkAvailable(Context context) { ConnectivityManager cm = (C ...
-
读TCP-IP详解卷1:协议(1)
1.TCP传给IP的数据单元称作TCP报文段或简称为TCP段(TCP segment)IP传给网络接口层的数据单元称作IP数据报(IPdatagram).通过以太网传输的比特流称作帧(Frame).
-
android客户端从服务器端获取json数据并解析的实现代码
今天总结一下android客户端从服务器端获取json数据的实现代码,需要的朋友可以参考下 首先客户端从服务器端获取json数据 1.利用HttpUrlConnection /** * 从指定的U ...
-
HDFS High Availability Using the Quorum Journal Manager
http://hadoop.apache.org/docs/r2.9.0/hadoop-project-dist/hadoop-hdfs/HDFSHighAvailabilityWithQJM.htm ...
-
SpringBoot的自动配置
1.根据条件来装配bean,SpringBoot的自动配置,根据条件进行自动配置. 首先创建一个接口,如下所示: package com.bie.encoding; /** * * @Descript ...
-
python 模拟实现一个ATM + 购物商城程序
思路:ATM是一个单独程序,提供给消费的是一个接口core下的settlement.py,只做了个人的,没写管理的模块 Shopping也是一个单独的,只做了一个购物的消费模块,没写商家模块,偷懒用了 ...
-
java的一些基本概念——java11、jdk、jre、jvm等
Java字节码 先介绍下c语言的编译过程,写好代码用编译器(比如gcc)编译过后是机器能够直接执行的二进制机器码. java也类似这种情况,但是java代码文件编译过后不是任何机器都能识别的机器码,而 ...
-
一个挺好用的生成GIF格式图片的小程序
import os import re import imageio pic_list = os.listdir() pic_type = ['png', 'jpg', 'jpeg', 'bmp'] ...