HTML5 canvas标签详解

Stella981
• 阅读 549

转载:

<canvas**>是html5**当中的一个标签,通过Javascript来画图。

画图形

HTML5 canvas标签详解
这是canvas的网格,刚才的图形,x=10,y=10, width=150, height=150

不像svg, canvas仅支持一种图形-矩形,所有其它复杂的图形都是通过一些函数来组成的。

画矩形

fillRect(x,y,width,height) : 画一个填充的矩形
strokeRect(x,y,width,height) : 为一个矩形描边
clearRect(x,y,width,height) : 清楚一个矩形的一部分并且设为透明

rect(x, y, width, height)
直接画矩形,当调用rect方法时moveTo会直接定位到(0,0)位置

画路径

beginPath() 创建路径的第一步是调用beginPath方法,返回一个存储路径的信息
closePath() 从当前的点到起始点闭合路径
stroke()描边路径
fill()填充路径
lineTo(x, y) 从上一个起点到(x,y)的点画线,上一个起点可以通过moveTo来指定,默认为原先路径的终点

ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill();画弧线

arc(x, y, radius, startAngle, endAngle, anticlockwise)
(x,y)是圆弧的圆心,radius-半径, startAngle和endAngle是圆弧的开始和结束弧度(radians = (Math.PI/180)*degree),anticlockwise为true的话是逆时针,否则为顺时针

二次方曲线以及贝塞尔曲线
HTML5 canvas标签详解
quadraticCurveTo(cp1x, cp1y, x, y)
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
(cp1x, cp1y),(cp2x,cp2y)是曲线的控制点(红点),(x,y)是曲线的终点

使用图像

drawImage(image, x, y)image-图像对象

function draw() {
var ctx = document.getElementById(’canvas’).getContext(’2d’);
var img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
ctx.beginPath();
ctx.moveTo(30,96);
ctx.lineTo(70,66);
ctx.lineTo(103,76);
ctx.lineTo(170,15);
ctx.stroke();
}
img.src = ‘images/backdrop.png’;
}

drawImage(image, x, y, width, height)width和height是目标canvas上图像的宽高
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

HTML5 canvas标签详解
image参数与前面一样,后面的四个参数是截取的参数,再后面的四个参数是目标canvas图像的位置以及宽高

应用样式和颜色

fillStyle = color 设置填充色
strokeStyle = color 设置描边色
color可以是css颜色值,一个渐变对象或一个模式对象

线条样式
lineWidth = value 线条宽度
HTML5 canvas标签详解
lineCap = type 线条的端点类型可以是butt(默认),round和square
HTML5 canvas标签详解
lineJoin = type 连接线的类型:round,bevel和miter(默认)
HTML5 canvas标签详解
miterLimit = value 当设置miter时的选项
HTML5 canvas标签详解

渐变

通过下面两个方法创建一个canvasGradient对象, 就可以把这个对象应用于fillStyle和strokeStyle属性了

createLinearGradient(x1,y1,x2,y2) (x1,y1)到(x2,y2)的渐变
createRadialGradient(x1,y1,r1,x2,y2,r2) (x1,y1,r1)的圆到(x2,y2,r2)的圆

addColorStop(position, color) 为canvasGradient对象添加颜色,position-[0,1]区间的值,代表添加颜色的位置,color-添加的颜色(如#fff, rgba(0,0,0,1)等)

模式

createPattern(image,type) image-Image对象,type:repeat,repeat-x, repeat-y, no-repeat 可以讲其应用与fillStyle或strokeStyle属性

阴影

shadowOffsetX = float 阴影x偏移
shadowOffsetY = float 阴影y偏移
shadowBlur = float 模糊度
shadowColor = color 阴影颜色

ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.font = "20px Times New Roman";
ctx.fillStyle = "Black";
ctx.fillText("Sample String", 5, 30);变换

保存和恢复
save() Cavas状态被存储在栈中,当调用save,当前的画图状态将被保存的栈中
restore() 调用restore最后一次存储的状态会被恢复
转移
translate(x, y) 移动canvas坐标
HTML5 canvas标签详解
旋转
rotate(angle) angle是旋转的角度,旋转的中心是canvas坐标原点,可以通过translate来移动canvas的坐标
HTML5 canvas标签详解
缩放
scale(x, y) x是水平方向的缩放因子,y是垂直方向的缩放因子,必须都为正数
变换
transform(m11, m12, m21, m22, dx, dy)
setTransform(m11, m12, m21, m22, dx, dy)

组合

globalCompositeOperation = type 设置不同形状的组合类型
type:(方的图形是已经存在的canvas内容,圆的图形是新的形状)
source-over(默认) – 在canvas内容上面画新的形状
HTML5 canvas标签详解
**destination-over
**HTML5 canvas标签详解
**source-in
**HTML5 canvas标签详解
**destination-in
**HTML5 canvas标签详解
**source-out
**HTML5 canvas标签详解
**destination-out
**HTML5 canvas标签详解
**source-atop
**HTML5 canvas标签详解
**destination-atop
**HTML5 canvas标签详解
**lighter
**HTML5 canvas标签详解
**darker
**HTML5 canvas标签详解
**xor
**HTML5 canvas标签详解
**copy
**HTML5 canvas标签详解

剪切路径

clip()
HTML5 canvas标签详解

基本动画

基本的动画步骤:
1.清除canvas – clearRect
2.保存canvas状态 – save
3.画要做动画的形状
4.恢复canvas状态 – 如果你已经保存了状态,在画新的帧之前回复它
控制动画
setInterval(animateShape,500);
setTimeout(animateShape,500);

var img = new Image();
//User Variables
img.src = 'Capitan_Meadows,_Yosemite_National_Park.jpg';
var CanvasXSize = 800;
var CanvasYSize = 200;
var speed = 30; //lower is faster
var scale = 1.05;
var y = -4.5; //vertical offset
//End User Variables

var dx = 0.75;
var imgW = img.width*scale;
var imgH = img.height*scale;
var x = 0;
if (imgW > CanvasXSize) { x = CanvasXSize-imgW; } // image larger than canvas
var clearX
var clearY
if (imgW > CanvasXSize) { clearX = imgW; } // image larger than canvas
else { clearX = CanvasXSize; }
if (imgH > CanvasYSize) { clearY = imgH; } // image larger than canvas
else { clearY = CanvasYSize; }
var ctx;

function init() {
    //Get Canvas Element
    ctx = document.getElementById('canvas').getContext('2d');
    //Set Refresh Rate
    return setInterval(draw, speed);
}

function draw() {
    //Clear Canvas
    ctx.clearRect(0,0,clearX,clearY);
    //If image is <= Canvas Size
    if (imgW <= CanvasXSize) {
        //reset, start from beginning
        if (x > (CanvasXSize)) { x = 0; }
        //draw aditional image
        if (x > (CanvasXSize-imgW)) { ctx.drawImage(img,x-CanvasXSize+1,y,imgW,imgH); }
    }
    //If image is > Canvas Size
    else {
        //reset, start from beginning
        if (x > (CanvasXSize)) { x = CanvasXSize-imgW; }
        //draw aditional image
        if (x > (CanvasXSize-imgW)) { ctx.drawImage(img,x-imgW+1,y,imgW,imgH); }
    }
    //draw image
    ctx.drawImage(img,x,y,imgW,imgH);
    //amount to move
    x += dx;
}

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Python进阶者 Python进阶者
2年前
手把手教你使用CanvasAPI打造一款拼图游戏
一、canvas简介1.canvas是HTML5提供的一种新标签,双标签;2.HTML5 canvas标签元素用于图形的绘制,通过脚本(通常是JavaScript)来完成;3.canvas标签只是图形容器,必须使用脚本来绘制图形;Canvas是一个矩形区域的画布,可以用JavaScript在上面绘画;二、案例目标我们今天的目标是使用HTML5
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Stella981 Stella981
2年前
H5中canvas和svg绘图方式介绍
在HTML5中包括了两种绘图方式,canvas和svg(矢量呈现),而与canvas不同的是,svg是一种XML标记语言,它既可以单独保存以“.svg”为后缀的文件在浏览器中打开显示,也支持建立svg标签直接嵌入在网页中显示,还可以通过<embedsrc"文件.svg"name"name自命"type"image/svgxml"height
Stella981 Stella981
2年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Wesley13 Wesley13
2年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
2年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
2个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这