前言：

canvas 元素用于在网页上绘制图形。

canvas 本身是一个标签，<canvas>标签定义图形，必须使用脚本来绘制图形，比如在画布上(Canvas)画一个红色矩形，渐变矩形，彩色矩形，和一些彩色文字。

什么是Canvas？

HTML5 的canvas元素使用javascript在网页上绘制图像。

画布是一个矩形区域，可以控制其每一像素

canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法

创建一个画布（canvas）

规定元素的id、宽度、高度

<canvas id="myCanvas" width="200" height="100"></canvas>

使用Javascript绘制图像

填充矩形

var c=document.getElementById("myCanvas");

//根据指定id，得到对象

//然后创建context对象

var cxt=c.getContext("2d");

//getContext(contextID)方法返回一个用于在画布上绘图的环境

//contextID指定在画布上绘制的类型，当前的唯一合法值是"2d",它指定了二维绘图

//拥有多种绘图路径，矩形、圆形、字符、图形等

cxt.fillStyle="purple";

cxt.fillRect(0,0,150,75);

//fillStyle属性可以填充颜色。当前是紫色

//fillRect（x,y,width,height）方法定义了矩形的填充方式

效果：

绘制线条

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.beginPath();//开始绘制路径（可写），可理解为断点，如果只有一个可不写，若有多个线条，让上一个和下一个不受影响，就要加上此方法

cxt.moveTo(10,10);  //移动到指定位置，开始坐标

cxt.lineTo(150,50);  //创建到达位置的一条线，结束坐标

cxt.lineTo(50,10);

cxt.strokeStyle="red";  //路径颜色

cxt.lineWidth="5";  // 线宽

cxt.stroke(); //进行绘制（结束，颜色，宽度等都在里面进行）

效果：

画圆

cxt.beginPath();

cxt.arc(95,50,40,0,2*Math.PI);

cxt.stroke();

//arc(x,y,半径,起始角度0，结束角度2*Math.PI)

渐变背景

var grd=cxt.createLinearGradient(0,0,175,50); //创建线性渐变createLinearGradient(x,y,x1,y1)

grd.addColorStop(0,"#FF0000");

grd.addColorStop(1,"#00FF00");  //规定渐变颜色和停止位置addColorStop(stop,color)

cxt.fillStyle=grd;   //填充颜色

cxt.fillRect(50,50,175,50);  //绘制填充矩阵

 绘图

var img=new Image() //创建img对象，img=document.getElementById("canvas-img");cxt.drawImage(img,10,10);

img.src="flower.png"   //设置src属性

cxt.drawImage(img,0,0); //绘制画布，img链接，xy轴坐标

加文字

cxt.font="30px Arial";  //大小字体

cxt.fillText("Hello World",10,50); //fillText(text,x,y) - 在 canvas 上绘制实心的文本

cxt.strokeText("Hello World",30,30)//strokeText(text,x,y) - 在 canvas 上绘制空心的文本

cxt.textAlign="center";//水平位置，居中

cxt.textAlign="start";//左

cxt.textAlign="end";//右

cxt.textBaseline="top";//垂直位置，上

cxt.textBaseline="bottom";//下

cxt.textBaseline="middle";//中

旋转

cxt.rotate(80*Math.PI/180);//旋转度

cxt.translate(0,0);//圆点位置

清除

cxt.clearRect(0,0,100,100);//清除矩阵

解析：

1、context.getContext("id") 用于创建一个画布绘图环境，其他一切canvas 属性及方法都在此基础上调用

2、context.beginPath(); 开始路径，可通过moveTo()、lineTo()、quadraticCurveTo()、bezierCurveTo()、arcTo() 以及 arc()来创建路径；closePath()从当前点回到起始点的路径。

3、drawImage完整参数：context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

图像或视频、开始剪切图片的x轴坐标、开始剪切图片的y坐标位置、

剪切图片的宽度、剪切图片的高度、

在画布上放置图像的x坐标、在画布上放置图像的y坐标、

要显示的图像宽度、要显示的图像高度（伸展或缩小图像），swidth 就是裁剪后的图像宽度，width是画布上要显示的图像宽度，比如width > swidth,则图片要放大

重点1：Canvas rect(), strokeRect() 和 fillRect() 的区别

他们都是用于在画布上实现效果，都能接受相同的参数，不同的是实现的方式方法和效果差异。

 fillRect( )

从字面上看，它就是填充矩形操作。

fillRect 默认填充颜色是黑色。

定义：

fillRect(x,y,width,height);

x:矩形左上角x左边

y:矩形左上角y左边

width:矩形宽度，以像素计

height:矩形高度，以像素计

说白了就是以x, y为坐标向右向下延伸填充矩形。

fillStyle="#fff000"; 绘制颜色，fillRect()要放最后

strokeRect( )

笔触绘制矩形（不填色），笔触的默认颜色是黑色。

定义与方法同fillRect( ).

那strokeStyle就是绘制的笔触颜色。同样，它也要写到strokeRect前面。

区别：

strokeRect  绘制的是带边框的矩形，不填色。

fillStyle 填充一个黑色矩形，无边框。

对应属性要作用在对应的方法上，如strokeRect( )是没有填充属性的。

同时需要填充与绘制，了解rect( )。

rect( )

创建矩形，用法和上面也是一样的，只是它仅创建矩形，并不会将矩形画出，只能通过调用stroke() 或 fill()才能作用到画布上。

例子：一个有边框有填充色的矩形。

<!DOCTYPE html>

<html>

<head><meta charset="utf-8"></head>

<body>

    <canvas id="c" width="400" height="300"></canvas>

</body>

<script type="text/javascript">

var c = document.getElementById('c');

var cxt = c.getContext('2d');

cxt.rect(0, 0, 100, 100);

cxt.fillStyle="pink";

cxt.strokeStyle="red";

cxt.fill();   //填充，不写填充无效

cxt.stroke(); //绘制，不写路径无效，两者无则矩形不能作用

</script>

</html>

arc( )绘制圆形同理，想要显示在画布上，只能通过调用stroke() 或 fill() 实现，用法见上面，注意画圆要把起始角设置为 0，结束角设置为 2*Math.PI，0.5PI是四分子一的圆。

这里都是基础的内容，Canvas详细方法与属性：https://www.w3school.com.cn/tags/html_ref_canvas.asp

Canvas 画布 H5的更多相关文章

  1. CANVAS画布与SVG的区别

    CANVAS是html5提供的新元素<canvas>,而svg存在的历史要比canvas久远,svg并不是html5专有的标签,最初svg是用xml技术(超文本扩展语言,可以自定义标签或属 ...

  2. 用canvas画布画一个画板

    前段时间,在对H5的回顾中突然对canvas有了感觉,闲来无事便对其进行了一些捯饬.这不,上周我还做了一个好玩的画板呢,废话不多说,直接上代码(PS:翠花,上代码~): HTML部分: <!DO ...

  3. html 5 canvas画布整理

    1. 创建canvas画布<canvas id="myCanvas" width="800" height="800" >< ...

  4. 用html5的canvas画布绘制贝塞尔曲线

    查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  5. 【读书笔记《Android游戏编程之从零开始》】12.游戏开发基础（Canvas 画布）

    1.Canvas 画布 画布类 Canvas 封装了图形和图片绘制等内容,此类常用的函数说明如下: drawColor(int color) 作用:绘制颜色覆盖画布,常用于刷屏 参数:颜色值,也可用十 ...

  6. 关于使用Css设置Canvas画布大小的问题

    问题分析 我们在调整画布大小时,希望画布中的图形保持不变,只是改变画布本身的大小.但是如果使用Css设置画布大小,则会出现问题. 问题描述 如果使用Css设置Canvas画布的大小,则导致画布按比例缩 ...

  7. Particles.js基于Canvas画布创建粒子原子颗粒效果

    文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...

  8. 自学HTML5第四节（canvas画布详解）

    canvas画布好像可是说是HTML5的精华了,一定要学好,嗯嗯,绚丽的东西就要从基础的开始.... 先看看啥玩意叫做canvas 什么是 Canvas? HTML5 的 canvas 元素使用 Ja ...

  9. “canvas画布仿window系统自带画图软件"项目的思考

    "canvas画布仿window系统自带画图软件"项目的思考 首先贴上DEMO图,并没有美化效果.对UI有要求的,请自带补脑技术. 思考一 在做项目的过程中,我发现"工具 ...

随机推荐

  1. Code Your First API With Node.js and Express: Set Up the Server

    How to Set Up an Express API Server in Node.js In the previous tutorial, we learned what the REST ar ...

  2. NPM——常用命令

    npm init //创建一个package.json | npm init -y //快速全部以默认的方式生成一个package.json ,-y是-yes的缩写 以下方式可按回车默认 name 项 ...

  3. Thinkphp5 post提交模糊查询带分页如何保留参数

    最近做了一个分页的模糊查询post请求,发现查出来的分页点击下一页导致所有的搜索条件被重置,分页效果就失效了. 以下是网上部分解决办法: 控制器代码 public function index($na ...

  4. es6基础：类、继承、重写

    es6真正的引入的面相对象的类,以前我们总是通过其他手段来模拟类这种形式,现在终于有了,我有点开心,又有点难过,因为在我看来,js并不是所谓的面相对象的语言,反而更偏向函数式,原型继承是他真正的面目. ...

  5. 自定义cursor鼠标 图片

    1.CSS3自定义鼠标样式 最近想要使用自定义鼠标样式,看了cursor的样式不好看,就想到cursor属性能不能自定义图片,翻看了下CSS3文档,发现是可以的 格式为:cursor:url('图片u ...

  6. Android_存储之文件存储

    前面几篇随笔 讲到的关于存储的,SharedPreferences.Room.数据库等 最终都是以文件形式 存储到手机上的(除特殊的存储于手机内存的:如Room可以创建内存数据库). 这些存储方式,A ...

  7. CSS 风车（花瓣）旋转动画圆角

    这是一个综合的案例,用到了transition(动画,动作在单位时间内完成),transform(旋转),border-radius(圆角),absolute(定位),linear-gradient( ...

  8. 10 个提高效率的 Linux 命令别名

    在 Linux 环境下工作的工程师,一定会对那些繁琐的指令和参数命令行印象深刻吧.而且,可怕的不是繁琐,而是需要大量重复输入这些繁琐的命令. 在 Linux 下我们有个别名命令 alias ,可以将那 ...

  9. 当微信小程序遇到云开发，再加上一个类似 ColorUI 的模板，人人都能做小程序了

    作为一个 Java 程序员,早就想尝试一把微信小程序,但是一直苦于没有想法,再加上做一个漂亮的页面实在不太擅长. 由于自己比较喜欢历史,经常看历史方面的书.在一次梳理中国现有的朝代时,突然想到,要是可 ...

  10. 移动端fixed兼容问题

    最近做移动端页面,有个需求类似下图 底部导航用fixed定位时在部分iOS版本中会有问题: 1.上滑是底部会跟着滑动,手指松开时才会又回到底部 2.软键盘唤起的情况下,也会出现许多莫名其妙的问题 网上 ...