超多经典 canvas 实例

普及:<canvas> 元素用于在网页上绘制图形。这是一个图形容器,您可以控制其每一像素,必须使用脚本来绘制图形。

注意:IE 8 以及更早的版本不支持 <canvas> 元素。

贴士:全部例子都分享在我的 GayHub - https://github.com/bxm0927/canvas-special

尤雨溪个人主页炫彩三角纽带效果,点击还可变换

GitHub源码 、 Demo演示

知乎登录注册页动态离子背景效果

GitHub源码 、 Demo演示

基于 canvas 的五子棋完整功能实现

GitHub源码 、 Demo演示

基于 canvas 的《是男人就下100层》小游戏完美实现

GitHub源码 、 Demo演示

毛笔字书写田字格,可以写字

GitHub源码 、 Demo演示

随心而动,随刃而行。输入文字显示动画粒子特效

GitHub源码 、 Demo演示

鼠标移动炫彩小球

GitHub源码 、 Demo演示

2048

GitHub源码 、 Demo演示

贪吃蛇

GitHub源码 、 Demo演示

看你有多色

GitHub源码 、 Demo演示

坦克大战

GitHub源码 、 Demo演示

宇宙行星旋转特效

GitHub源码 、 Demo演示

支付宝咻咻咻动画特效

GitHub源码 、 Demo演示

程序员表白代码

GitHub源码 、 Demo演示

心形文字

GitHub源码 、 Demo演示

照片墙

GitHub源码 、 Demo演示

License

The code is available under the MIT license.

<marquee>不断更新,欢迎补充!</marquee>

!


canvas 简介

<canvas> 元素用于在网页上绘制图形。这是一个图形容器,您可以控制其每一像素,必须使用脚本来绘制图形。

<canvas> 标记和 SVG 以及 VML 之间的一个重要的不同是,<canvas> 有一个基于 JavaScript 的绘图 API,而 SVG 和 VML 使用一个 XML 文档来描述绘图。

注意:IE 8 以及更早的版本不支持 <canvas> 元素。

!

canvas 初体验

<canvas id="myCanvas" width="450" height="450">
  Your browser does not support the Canvas API, Please upgrade your browser.
</canvas>

<script>
let myCanvas = document.getElementById('myCanvas');
let ctx = myCanvas.getContext('2d');

ctx.moveTo(100, 100);
ctx.lineTo(200, 200);
ctx.lineTo(200, 300);

ctx.stroke();
</script>

canvas 核心 API 讲解

建议大家看官方文档来系统的学习 canvas API,本文下面的例子只是对知识点的巩固。

颜色、样式和阴影

fillStylestrokeStyle

fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。

strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式。

// 用蓝色填充矩形
ctx.fillStyle="#0000ff";
ctx.fillRect(20,20,150,100);

// 渐变填充
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

// 图像填充
var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();

!

!

shadowBlurshadowColor

shadowBlur 设置或返回用于阴影的模糊级别

shadowColor 设置或返回用于阴影的颜色

注释1:请将 shadowColor 属性与 shadowBlur 属性一起使用,来创建阴影。

注释2:请通过使用 shadowOffsetX 和 shadowOffsetY 属性来调节阴影效果。

ctx.shadowBlur=20;
ctx.shadowColor="black";
ctx.fillStyle="blue";
ctx.fillRect(20,20,100,80);

!

createLinearGradient()createRadialGradient()

context.createLinearGradient(x0,y0,x1,y1) 创建线性渐变

context.createRadialGradient(x0,y0,r0,x1,y1,r1) 创建放射状/环形的渐变

注释:addColorStop(stop,color) 方法与 createLinearGradient() 或 createRadialGradient()一起使用。

var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

!

var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);

!

context.createPattern()

context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat") 重复绘制元素,元素可以是图片、视频,或者其他 <canvas> 元素。

var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();

!

线条样式

lineCap

context.lineCap="butt|round|square"

设置或返回线条的结束端点样式 (平直的边缘(默认)、圆形线帽、正方形线帽)

lineJoin

context.lineJoin="miter|bevel|round"

设置或返回两条线相交时,所创建的拐角类型 (尖角(默认)、斜角、圆角)

ctx.beginPath();
ctx.lineJoin="round";
ctx.moveTo(20,20);
ctx.lineTo(100,50);
ctx.lineTo(20,100);
ctx.stroke();

!

lineWidth

ctx.lineWidth = 10

设置或返回当前的线条宽度,单位 px

矩形

rect()fillRect()strokeRect()

context.rect(x,y,width,height) 创建矩形

context.fillRect(x,y,width,height) 创建已填色的矩形,默认的填充颜色是黑色。

context.strokeRect(x,y,width,height) 创建不填色的矩形,默认的笔触颜色是黑色。

// 红色矩形
ctx.beginPath();
ctx.lineWidth="6";
ctx.strokeStyle="red";
ctx.rect(5,5,290,140);
ctx.stroke();

clearRect()

clearRect() 在给定的矩形内清除指定的像素

// 在给定矩形内清空一个矩形
ctx.fillStyle="red";
ctx.fillRect(0,0,300,150);
ctx.clearRect(20,20,100,50);

!

路径

提示:请使用这些方法来创建路径:moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 以及 arc()。

fill()

填充当前的图像(路径)。默认颜色是黑色。

提示:请使用 fillStyle 属性来填充另一种颜色/渐变。

注释:如果路径未关闭,那么 fill() 方法会从路径结束点到开始点之间添加一条线,以关闭该路径,然后填充该路径。

// 绘制 150*100 像素的矩形,然后用绿色来给它填色:
ctx.rect(20,20,150,100);
ctx.fillStyle="green";
ctx.fill();

!

stroke()

stroke() 方法会绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。

提示:请使用 strokeStyle 属性来绘制另一种颜色/渐变。

beginPath()

beginPath() 起始一条路径,或重置当前路径

closePath()

closePath() 创建从当前点回到起始点的路径

moveTo()lineTo()

moveTo() 把路径移动到画布中的指定点,不创建线条

lineTo() 添加一个新点,然后在画布中创建从该点到最后指定点的线条

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();

quadraticCurveTo()bezierCurveTo()

context.quadraticCurveTo(cpx,cpy,x,y); 创建二次贝塞尔曲线

context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); 创建三次方贝塞尔曲线

ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();

image
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();

image

arc()arcTo()

context.arc(x,y,r,sAngle,eAngle[,counterclockwise]); 创建弧/曲线(用于创建圆形或部分圆)

context.arcTo(x1,y1,x2,y2,r); 创建两切线之间的弧/曲线

ctx.beginPath();
arc(100, 75, 50, 0*Math.PI, 1.5*Math.PI)
ctx.stroke();

image
ctx.beginPath();
ctx.moveTo(20,20);           // 创建开始点
ctx.lineTo(100,20);          // 创建水平线
ctx.arcTo(150,20,150,70,50); // 创建弧
ctx.lineTo(150,120);         // 创建垂直线
ctx.stroke();                // 进行绘制

!

clip()

clip() 从原始画布剪切任意形状和尺寸的区域

// 剪切矩形区域
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// 在 clip() 之后绘制绿色矩形
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);

!

isPointInPath()

isPointInPath() 如果指定的点位于当前路径中,则返回 true,否则返回 false

ctx.rect(20,20,150,100);
if (ctx.isPointInPath(20,50)) {
  ctx.stroke()
}

转换

scale()

scale() 缩放当前绘图至更大或更小

// 绘制矩形,放大到 200%,然后再次绘制矩形:
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);

!

rotate()

rotate() 旋转当前绘图

// 将矩形旋转 20 度:
ctx.rotate(20 * Math.PI / 180);
ctx.fillRect(50,20,100,50);

!

translate()

translate() 重新定义画布上的 (0,0) 位置

ctx.fillRect(10,10,100,50);
ctx.translate(70,70);
ctx.fillRect(10,10,100,50);

!

transform()setTransform()

context.transform(a,b,c,d,e,f); 替换绘图的当前转换矩阵

context.setTransform(a,b,c,d,e,f); 将当前转换重置为单位矩阵。然后运行 transform()

文本

fonttextAligntextBaseline

font 设置或返回文本内容的当前字体属性

textAlign 设置或返回文本内容的当前对齐方式

textBaseline 设置或返回在绘制文本时使用的当前文本基线

fillText()strokeText()measureText()

context.fillText(text, x, y, maxWidth); 在画布上绘制被填充的文本

context.strokeText(text,x,y,maxWidth); 在画布上绘制文本(无填充)

context.measureText(text).width; 返回包含指定文本宽度的对象

ctx.font="30px Arial";
ctx.fillText("Hello World", 10, 50);
ctx.font="40px Arial";
// 创建渐变
var gradient=ctx.createLinearGradient(0, 0, myCanvas.width, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// 用渐变填色
ctx.strokeStyle=gradient;
ctx.strokeText("Hello World", 10, 90);

图像绘制

drawImage()

context.drawImage(img,x,y,width,height); 向画布上绘制图像、画布或视频

var img=document.getElementById("tulip");
ctx.drawImage(img, 10, 10);

像素操作

widthheightdata

width 返回 ImageData 对象的宽度

height 返回 ImageData 对象的高度

data 返回一个对象,其包含指定的 ImageData 对象的图像数据

createImageData()getImageData()putImageData()

createImageData() 创建新的、空白的 ImageData 对象

getImageData() 返回 ImageData 对象,该对象为画布上指定的矩形复制像素数据

putImageData() 把图像数据(从指定的 ImageData 对象)放回画布上

合成

context.globalAlpha = number; 设置或返回绘图的当前 alpha 或透明值
context.globalCompositeOperation="source-in"; 设置或返回新图像如何绘制到已有的图像上

其他

save()restore()

save() 保存当前环境的状态
restore() 返回之前保存过的路径状态和属性

getContext

let cxt = Canvas.getContext('2d')

为不同的绘制类型 (2d、3d) 提供不同的环境,当前唯一支持的是 2d 环境

超多经典 canvas 实例,动态离子背景、移动炫彩小球、贪吃蛇、坦克大战、是男人就下100层、心形文字等等等的更多相关文章

  1. Unity经典游戏教程之:是男人就下100层

    版权声明: 本文原创发布于博客园"优梦创客"的博客空间(网址:http://www.cnblogs.com/raymondking123/)以及微信公众号"优梦创客&qu ...

  2. 『HTML5挑战经典』是英雄就下100层-开源讲座(一)从天而降的英雄

    是英雄就下100层是一款经典的手机小游戏,以前是在诺基亚手机上十分有名.今天我们就用HTML5和lufylegend一步步地实现它. 一,准备工作 首先,你需要下载lufylegend,下载地址如下: ...

  3. [js高手之路]html5 canvas动画教程 - 跟着鼠标移动消失的一堆炫彩小球

    综合利用前面所学,实现一个绚丽的小球动画,这个实例用到的知识点,在我的博客全部都有,可以去这里查看所有的canvas教程 <head> <meta charset='utf-8' / ...

  4. 『HTML5挑战经典』是英雄就下100层-开源讲座(二)危险!英雄

    本篇为<『HTML5挑战经典』是英雄就下100层-开源讲座>第二篇,需要用到开源引擎lufylegend,可以到这里下载: 下载地址:http://lufylegend.googlecod ...

  5. Canvas跟随鼠标炫彩小球

    跟随鼠标炫彩小球 canvas没有让我失望,真的很有意思 实现效果 超级炫酷 实现原理 创建小球 给小球添加随机颜色,随机半径 鼠标移动通过实例化,新增小球 通过调用给原型新增的方法,来实现小球的动画 ...

  6. 用HTML5 Canvas为网页添加动态波浪背景

    查看所有代码请去Github 本文出自 “UED” 博客:http://5344794.blog.51cto.com/5334794/1430877 <!DOCTYPE html> < ...

  7. 超像素经典算法SLIC的代码的深度优化和分析。

    现在这个社会发展的太快,到处都充斥着各种各样的资源,各种开源的平台,如github,codeproject,pudn等等,加上一些大型的官方的开源软件,基本上能找到各个类型的代码.很多初创业的老板可能 ...

  8. html5 canvas首屏自适应背景动画循环效果代码

    模板描述:html5 canvas首屏自适应背景动画循环效果代码 由于动态图太大,怕以后服务器受不了,所以现在都改为静态图了,大家点击演示地址一样的,希望大家喜欢,你们的支持就是小海的动力!! 欢迎大 ...

  9. 超酷HTML5 Canvas图表应用Chart.js自定义提示折线图

    超酷HTML5 Canvas图表应用Chart.js自定义提示折线图 效果预览 实例代码 <div class="htmleaf-container"> <div ...

随机推荐

  1. Spring远程调用技术&lt;2&gt;-Hessian和Burlap

    上篇谈到RMI技术,加上Spring的封装,用起来很方便,但也有一些限制 这里的Hessian和Burlap解决了上篇提到的限制,因为他们是基于http的轻量级远程服务. Hessian,和RMI一样 ...

  2. JS splice() 定义和用法

    定义和用法 splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目. 注释:该方法会改变原始数组. 语法 arrayObject.splice(index,howmany,item1, ...

  3. MVC 前台向后台传输数据

    今天,我们一起来学习下.MVC如何在前台给后台传输数据 (1)前台传输数据到后台 具体思路:前台拼凑json字符串,然后通过 get 或 post 方式,传递到后台 Action 方法中 我现在前台展 ...

  4. MongoDB 安装(Window/Linux)

    MongoDB安装在Windows上 在 Windows上,首先要安装 MongoDB下载最新发布的MongoDB: http://www.mongodb.org/downloads 确保得到正确的版 ...

  5. poj 1191 棋盘分割 动态规划

    棋盘分割 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 11457   Accepted: 4032 Description ...

  6. solr学习笔记-开篇

    由于工作需要,近期接触了一下全文检索的相关技术,从lucenen到solr开始慢慢一路摸爬滚打,仅以此文记录自己的学习里程和记录下各种坑. 本次学习基于以下环境版本: java7,solr5.5.4( ...

  7. 指数加权移动平均法(EWMA)

    ** 本文内容来自于吴恩达深度学习公开课 1.概述 加权移动平均法,是对观察值分别给予不同的权数,按不同权数求得移动平均值,并以最后的移动平均值为基础,确定预测值的方法.采用加权移动平均法,是因为观察 ...

  8. python学习笔记(2)--基本语法元素

    来看一个非常简单的温度转换程序 #Tempconvert.py tempstr = input("输入:") if tempstr[-1] in ['F', 'f']: C = ( ...

  9. 11/1/2018模拟 Max

    题面 也就是说, 随机序列RMQ.(\(n \le 8388608\), \(m \le 8*10^6\)) 解法 我写了笛卡尔树+tarjan 然而听神仙说, 因为数据随机, 建完树暴力找lca就行 ...

  10. Python3学习笔记06-字符串

    可以使用引号('或")来创建字符串. var1 = 'Hello World!' var2 = "Runoob" 在最新的Python 3版本中,字符串是以Unicode ...