Canvas 画布 H5
前言：
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的更多相关文章
- CANVAS画布与SVG的区别
CANVAS是html5提供的新元素<canvas>,而svg存在的历史要比canvas久远,svg并不是html5专有的标签,最初svg是用xml技术(超文本扩展语言,可以自定义标签或属 ...
- 用canvas画布画一个画板
前段时间,在对H5的回顾中突然对canvas有了感觉,闲来无事便对其进行了一些捯饬.这不,上周我还做了一个好玩的画板呢,废话不多说,直接上代码(PS:翠花,上代码~): HTML部分: <!DO ...
- html 5 canvas画布整理
1. 创建canvas画布<canvas id="myCanvas" width="800" height="800" >< ...
- 用html5的canvas画布绘制贝塞尔曲线
查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
- 【读书笔记《Android游戏编程之从零开始》】12.游戏开发基础（Canvas 画布）
1.Canvas 画布 画布类 Canvas 封装了图形和图片绘制等内容,此类常用的函数说明如下: drawColor(int color) 作用:绘制颜色覆盖画布,常用于刷屏 参数:颜色值,也可用十 ...
- 关于使用Css设置Canvas画布大小的问题
问题分析 我们在调整画布大小时,希望画布中的图形保持不变,只是改变画布本身的大小.但是如果使用Css设置画布大小,则会出现问题. 问题描述 如果使用Css设置Canvas画布的大小,则导致画布按比例缩 ...
- Particles.js基于Canvas画布创建粒子原子颗粒效果
文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...
- 自学HTML5第四节（canvas画布详解）
canvas画布好像可是说是HTML5的精华了,一定要学好,嗯嗯,绚丽的东西就要从基础的开始.... 先看看啥玩意叫做canvas 什么是 Canvas? HTML5 的 canvas 元素使用 Ja ...
- “canvas画布仿window系统自带画图软件"项目的思考
"canvas画布仿window系统自带画图软件"项目的思考 首先贴上DEMO图,并没有美化效果.对UI有要求的,请自带补脑技术. 思考一 在做项目的过程中,我发现"工具 ...
随机推荐
- 汉字统计（hdu2030）
输入格式:一个整型,再循环带有空格的字符串 思考:用scanf_s()函数输入整型,然后一个大循环,再用gets_s()函数输入带空格的字符串. 注意:scanf_s()函数多加了%c,&d, ...
- python 生成随机字符串
1.生成随机字符串 #数字+字母+符号 def getRandChar(n): l = [] #sample = '0123456789abcdefghijklmnopqrstuvwxyz!@#$%^ ...
- thinkphp路由简介和设置使用
use think\Route; //静态路由 Route::rule('/', 'index/index/index'); Route::rule('test', 'index/index/test ...
- C++软件开发面试题总结
面试题有难有易,不能因为容易,我们就轻视,更不能因为难,我们就放弃.我们面对高薪就业的态度永远不变,那就是坚持.坚持.再坚持.出现问题,找原因:遇到困难,想办法.我们一直坚信只有在坚持中才能看到希望, ...
- Android_四大组件之Service
一.概述 Service是四大组件之一.它主要用于在后台执行耗时的逻辑,即使用户切换到其他应用甚至退出应用,它也能继续在后台运行. 下面主要介绍了service的两种形式启动和绑定 ,并通过简单例子说 ...
- Java多线程--synchronized的用法
全面介绍Synchronized:https://blog.csdn.net/luoweifu/article/details/46613015 synchronized class/this/obj ...
- 13 . Python3之并发编程
什么是操作系统? 为什么要有操作系统? 现代的计算机系统主要是由一个或者多个处理器,主存,硬盘,键盘,鼠标,显示器,打印机,网络接口及其他输入输出设备组成. 一般而言,现代计算机系统是一个复杂的系统. ...
- 【Android】SDK的配置
1:Android Studio 下载 安装后创建项目 2: 打开settings 3:下载后,配置SDK 4:下载jdk1.8.0_74.rar 解压 加入环境变量 5:下载夜神模拟器,加 ...
- 【朝夕Net社区技术专刊】Core3.1 WebApi集群实战专题---WebApi环境搭建运行发布部署篇
欢迎大家阅读<朝夕Net社区技术专刊>第1期 原文是我在知乎发表的,现在在这里分享! 我们致力于.NetCore的推广和落地,为更好的帮助大家学习,方便分享干货,特创此刊!很高兴你能成为首 ...
- 跟着阿里学JavaDay06——Java基础语法（四）
一.方法 方法执行到return语句后,这个方法的执行就结束了,方法可以有返回值,但可以不用这个返回值.方法首先要定义,然后才能调用. public class TestMethod{ public ...