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
最新文章
- winform控件在Enable=false的情况下改变它的字体颜色
- NameError: name &#39;sys_platform&#39; is not defined
- linux系统安装(下)
- mac java 安装路径
- linux下利用elk+redis 搭建日志分析平台教程
- 从决策树学习谈到贝叶斯分类算法、EM、HMM
- 四、Mp3文件类型及其判断
- POJ3322-经典的游戏搜索问题
- PHP 魔术方法之__set__get__unset,__isset,__call
- [其他]win7下chrome浏览器插件导出与导入
- ida dump内存脚本
- java学习笔记 --- StringBuffer类
- jQuery的hover方法搭配css的hover选择器,实现选中元素突出显示
- 调参过程中的参数 学习率,权重衰减,冲量(learning_rate , weight_decay , momentum)
- javamail+ical4j发送会议提醒
- 洛谷 P1691 解题报告
- MySQL 大表优化方案
- 给定一个只包含正整数的非空数组,返回该数组中重复次数最多的前N个数字 ,返回的结果按重复次数从多到少降序排列(N不存在取值非法的情况)
- cocos2d CCNode类(节点属性大全)
- Spring Cloud (5)hystrix 服务熔断
热门文章
- 约瑟夫环(超好的代码存档)--19--约瑟夫环--LeetCode面试题62(圆圈最后剩下的数字)
- VMware虚拟机,vps忘记密码修改密码
- opencv3学习1:opencv3.4.10与vs2017环境配置
- HTML特殊符号整理
- 基于Pytest豆瓣自动化测试【1】
- Javascript书写位置
- [代码片段-C#]工具代码片段 及 版本信息等
- 读Pyqt4教程,带你入门Pyqt4 _012
- 上位机C#通过OPCUA和西门子PLC通信
- Chisel3 - Tutorial - Adder4