欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

canvas行使留意点总结

发布时间:2016-11-25  编辑:杨雨个人博客网站   点击:   

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()),然后重绘 本文地址:http://itbyc.com/web/html5/13271.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1