canvas基础知识点(一)
给canvas设置宽高:
canvas标签的宽高默认是300*150,是一个行内块元素
可以在canvas标签上通过width,height来设置
可以在js中给dom对象设置:mycanvas.width = 500
mycanvas.height = 500注意:不要通过css来调整canvas的宽高,导致内部的canvas画布被拉伸,图形变形
- 获取画笔工具:
canvas绘图都是通过canvas标签的画笔来进行的var ctx = canvas.getContext('2d')
注意,不要写成getContent,里面传入的参数目前也只有2d这一种情况
- 获取画笔工具:
3、 描边和填充
canvas绘制图形都是绘制的路径,看不见摸不着的一种东西,需要进行描边或填充之后才能看到真正的图形
如果绘制图形的路径在绘制完成后没有闭合,继续绘制路径的时候会首尾相连
在填充的时候如果路径依然没有闭合,会将路径的闭合区域填充
ctx.fill()//填充
ctx.stroke()//描边
可以调整ctx.strokeStyle,ctx.fillStyle属性来更改填充,描边的颜色,值为颜色值(rgb,rgba,word,16进制)
- 绘制矩形
ctx.rect(x,y,w,h)
canvas的坐标系起点是左上角,x轴向右正方向,y轴向下正方向
x,y代表的是矩形起点(左上角)的位置,w,h就是宽高
可以使用strokeRect,fillRect方法直接绘制一个填充、描边的矩形
清楚矩形区域以及动画原理
ctx.clearRect(x,y,w,h)可以清除某一个矩形区域的图形
canvas实现动画的原理就是不断的绘制和擦除来实现var ctx = canvas.getContext("2d")
let x=0,y=0;
ctx.fillRect(x,y,50,50)
setInterval(function () {
//绘制新的图形前擦掉之前的
ctx.clearRect(0,0,canvas.width,canvas.height)
x++;y++;
//不断绘制新图形
ctx.fillRect(x,y,50,50)
},30)
canvas基础知识点(一)的更多相关文章
- canvas API ,通俗的canvas基础知识(一)
在没学canvas的时候,觉得canvas是这么的神秘,这么的绚丽,这么的高深,用canvas做出来的效果是如此的炫酷,能做的事情如此的宽广,简直让我心生敬畏之心,时常感叹:我要是得此技能,必定要上天 ...
- HTML5移动开发学习笔记之Canvas基础
1.第一个Canvas程序 看的是HTML5移动开发即学即用这本书,首先学习Canvas基础,废话不多说,直接看第一个例子. 效果图为: 代码如下: <!DOCTYPE html> < ...
- fastclick 源码注解及一些基础知识点
在移动端,网页上的点击穿透问题导致了非常糟糕的用户体验.那么该如何解决这个问题呢? 问题产生的原因 移动端浏览器的点击事件存在300ms的延迟执行,这个延迟是由于移动端需要通过在这个时间段用户是否两次 ...
- .NET基础知识点
.NET基础知识点 l .Net平台 .Net FrameWork框架 l .Net FrameWork框架提供了一个稳定的运行环境,:来保障我们.Net平台正常的运转 l 两种交 ...
- JavaScript 开发者经常忽略或误用的七个基础知识点(转)
JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它.昨天我们将这些模式应用到了 JavaScript 框架中,今天这些框架又驱动了我们的 Web 应用程序.很多新 ...
- JavaScript 开发者经常忽略或误用的七个基础知识点
JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它.昨天我们将这些模式应用到了 JavaScript 框架中,今天这些框架又驱动了我们的 Web 应用程序.很多新 ...
- canvas基础之旅
canvas 主要使用2D rendering context API 实现其功能和特效. canvas 一般浏览器都支持,但在ie9之前的是不支持的.(解决办法:添加IxplorerCanvas ...
- canvas 基础知识整理(二)
html部分: <canvas id="myCanvas" width="800" height="800" ></can ...
- canvas 基础知识整理(一)
canvas这个 HTML 元素是为了客户端矢量图形而设计的.它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上. html的基本 ...
随机推荐
- 基于APR模式的Tomcat8环境部署
1.版本信息 组件名 版本号 jdk 1.8.111 tomcat 8.5.9 apr 1.6.3 apr-iconv 1.2.2 apr-util 1.6.2 tomcat-native 1.2.1 ...
- 无障碍开发(六)之ARIA在HTML中的使用规则
ARIA使用规则一 如果你使用的元素( HTML5 )具有语义化,应该使用这些元素,而不应该重新定义一个添加ARIA的角色.状态或属性的元素. 浏览器的语义化标签已经默认隐含ARIA语义,像nav,a ...
- Excel学习笔记:行列转换
目录 offset函数 行列转换的三种方式 1.右键转置 2.转置公式TRANSPOSE 3.引用函数OFFSET+ROWS/COLUMN(支持随时更新数据) 一行(列)转多行多列 offset函数 ...
- 一点css 基础
css 行内样式优先度最高 margin 属性 为声明外边距 如图 顺序依次为上右下左
- Gephi简单导入数据
使用工具 Gephi-0.9.2 事前要导入的数据 Node.csv 节点:名称可以所以定,格式.csv Edge.csv 边:名称可以所以定,格式.csv 导入操作 新建项目 导入节点 新建列要与表 ...
- Java面向对象(二)
面向对象(Object Oriented) Java支持面向对象三大特性:封装.继承.多态.(抽象)1.封装(Encapsulation)封装:隐藏对象内部的复杂性,只对外公开简单的接口.便于外界调用 ...
- 记一次自启动的docker容器将宿主机的开机用户登录界面覆盖事件
宿主机的系统为CentOS7_7.7.1908,默认为GUI启动,安装了宝塔面板,docker-ce为最新版. 在启动了一个centos7的容器(镜像为centos官方镜像)后,将该容器重启策略设置为 ...
- 排序算法之快速排序QuickSort
挖坑填数-快速排序 1. left = L,right = R;将基准数挖出形成第一个坑s[left]; 2. right --; 由后向前找比它小的数,找到后挖出此数填前一个坑s[left]中. 3 ...
- linux基础—课堂随笔06_软件包管理
软件包管理 rpm 包和包管理器 包的组成: 二进制文件.库文件.配置文件.帮助文件 程序包管理器: debian: deb文件,dpkg包管理器 redhat:rpm文件,rpm包管理器 r ...
- 小程序UI设计(7)-布局分解-左-上下结构
FlexBox布局中的变幻方式很多,我们继续了解一个左-上下结构的布局分解 左边结构树中WViewRow下面有两个WViewColumn.WViewRow是横向排列,WViewColumn是纵向排列 ...