canvas介绍(画布)
canvas(画布)主要是位图 svg(矢量图)
canvas标签,必须要写的3个属性 id width height
为什么不再style中设置width和height呢?
因为这设置width和height话会有位移差;
位移差:在画布里面的元素有偏差;
js中每次使用canvas,都要设置一个绘图环境,然后会得到一个对象,然后对其进行操作;
var c=document.getElementById("") canvas标签的id值;
var d=c.getContext("2d") 设置绘图属性;
然后得到d这个对象,就可以对其进行操作元素里面的属性和方法;
方法和属性(带()的是方法,不带的是属性):
fillRect():绘制一个填充方块,默认颜色是黑色; 参数:x,y,w,h (坐标和宽高)
fillStyle:填充颜色 属性值:想要的颜色;
strokeRect():绘制边框的方框; (如果绘制边框的话,会有2px的偏差,所以设置坐标的话需要在原有的基础上加上0.5),参数同fillRect()
lineWidth:边框粗细;
strokeStyle:线条颜色;
lineJoin:边框圆角 属性值:round 圆,
lineCap:线条圆角;
绘制线条
moveTo():绘制线段的起点 参数 x,y 坐标位置;
lineTo():绘制线段的领点 参数 x,y 坐标位置 ; (最后一个lineTo就代表终点)
线条只能有一个moveTo(),但却可以有很多lineTo()
stroke() 绘制线段;
beginPath 开始路径 必须要写对应的关闭路径
closePath 关闭路径
两者同时出现,将绘制路径闭合,起始点和结尾点,首尾相连;
rect() 绘制方块,及不带填充色和线框;
fill() 填充颜色;
clearRect(x,y,width,height) 清除矩形区域
save() restore() 这两个方法成对出现,中间的属性样式,之影响内部,不影响外部;
画圆:
arc():参数(x,y,半径,开始弧度,结束弧度,时针方向);
x,y坐标 半径,圆的大小, 开始弧度,一般都是0,结束弧度,一般都是 (0-360)*Math.PI/180, 时针方向,true 逆时针,false 顺时针;
translate() 平移,画布大小位置不变,起始坐标变了 参数 x,y
旋转:rotate() 同translate原理;
需注意一点,需要先通过 translate() 确定起始坐标点,在来操作rotate会比较好
缩放:scale(0.5,0.5) 画布缩放,就是将画布向后移动,跟人的视距就远了,近大远小;
画布中插入图片;drawImage()
var img=new Image()
img.src="图片路径"
img.onload=function(){
d.drawImage(img,x,y,w,h) d就是画布对象,img图片对象,坐标宽高,drawImage()在画布中插入图片
}
插入文字:
strokeText() 插入的文字带边框 参数: "输入的内容" , x , y (坐标)
fillText() 不带边框 参数同strokeText()
textAlign:相对字体的起始点,水平居中
textBaseline:移到字体的起始点,垂直居中
font:字体大小和字形
canvas介绍(画布)的更多相关文章
- HTML5 Canvas(画布)实战编程初级篇:基本介绍和基础画布元素
欢迎大家阅读HTML5 Canvas(画布)实战编程初级篇系列,在这个系列中,我们将介绍最简单的HTML5画布编程.包括: 画布元素 绘制直线 绘制曲线 绘制路径 绘制图形 绘制颜色,渐变和图案 绘制 ...
- canvas介绍和用途
canvas介绍和用途 canvas(画布)主要是位图 svg(矢量图) canvas标签,必须要写的3个属性 id width height 为什么不在style中设置width和height呢? ...
- Android绘图基础Paint和Canvas介绍-android学习之旅(六十一)
canvas介绍 Paint类介绍 代码示例 效果图
- 安卓自定义View进阶-Canvas之画布操作 转载
安卓自定义View进阶-Canvas之画布操作 转载 https://www.gcssloop.com/customview/Canvas_Convert 本来想把画布操作放到后面部分的,但是发现很多 ...
- HTML5中canvas介绍
1.什么是Canvas canvas 是 HTML5 提供的一个用于展示绘图效果的标签 canvas 提供了一个空白的图形区域,可以使用特定的JavaScript API来绘画图形(canvas 2D ...
- Canvas对画布及文字控制基础API学习
这次纯API练习,比较简单,但是是为了之后的结合项目打基础的,所以也不能忽视它,下面开始: Canvas的平移.旋转.缩放 这里还是以上次画那个青春痘的DEMO为例[http://www.cnblog ...
- (网页)html5 canvas清空画布方法(转)
总结以下三种清空canvas画布的方式: 1. 最简单的方法:由于canvas每当高度或宽度被重设时,画布内容就会被清空,因此可以用以下方法清空: function clearCanvas() { v ...
- Wpf 之Canvas介绍
从这篇文章开始是对WPF中的界面如何布局做一个较简单的介绍,大家都知道:UI是做好一个软件很重要的因素,如果没有一个漂亮的UI,功能做的再好也无法吸引很多用户使用,而且没有漂亮的界面,那么普通用户会感 ...
- canvas:画布
画布有默认宽度,如果要自己设置宽带要写在属性上 列: <canvas id = "myCanvas" width = "600" height = &qu ...
随机推荐
- Maven 项目中的groupId和artifactId
maven进行项目管理,如果我们要将项目加入到maven到本地仓库中,则需要对项目进行唯一性标示,而groupId和artifactId就起到这样对作用. groupId为项目组织对唯一标识符,可以理 ...
- GmSSL Build with VS2017
使用背景: 最近研究GB35114, 有关于sip协议部分,exosip的已经编译过,由于gb3511中采用的是国密算法,因此这里记录一下GMSSL在windows下的编译过程以及遇到的错误 详细GM ...
- 基于TCP和UDP的socket
为什么学习socket 你自己现在完全可以写一些小程序了,但是前面的学习和练习,我们写的代码都是在自己的电脑上运行的,虽然我们学过了模块引入,文件引入import等等,我可以在程序中获取到另一个文件的 ...
- 二、JVM — 垃圾回收
JVM 垃圾回收 写在前面 本节常见面试题 本文导火索 1 揭开 JVM 内存分配与回收的神秘面纱 1.1 对象优先在 eden 区分配 1.2 大对象直接进入老年代 1.3 长期存活的对象将进入老年 ...
- linux:服务器代理squid安装配置
国内上往外的网站太慢,配了个香港代理服务器.如下:当前环境: centos系统.香港服务器IP(假设:59.188.71.11)检查squid是否安装:[root@localhost ~]# rpm ...
- 吴恩达机器学习7:代价函数(Cost function)
一.简介 1.在线性回归中,我们有一个这样的训练集,M代表训练样本的数量,假设函数即用来进行预测的函数是这样的线性函数的形式,我们接下来看看怎么选择这两个参数: 2.如下图中,怎么选择两个参数来更好的 ...
- 锚点定位且不改变url地址
锚点定位且不改变url html 事件触发<li v-for="(item,index) in couponsList.swaps" :key="index&quo ...
- python函数带不带括号的问题
Python带括号返回的是该函数的返回值 不带括号返回的是该函数的位置信息等
- 在浏览器输入URL发生了什么
在我们输入google.com之后,浏览器上很快就会呈现出谷歌的页面,本文简单介绍一下从URL的输入到浏览器页面的展示,这中间发生了些什么. URL是什么URL全名叫统一资源定位符,uniform r ...
- 左半连接left demi-join
返回左边表的记录,前提是其记录对于右边表满足on语句的判定条件 对于左表中一条指定的记录,在右表中一旦找到匹配的记录,hive就会立即停止扫描 1.sql select s.myd,s,symbol, ...