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的基本 ...
随机推荐
- JS基础_相等运算符
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- LCN分布式事务管理(一)
前言 好久没写东西了,9月份换了份工作,一上来就忙的要死.根本没时间学东西,好在新公司的新项目里面遇到了之前没遇到过的难题.那遇到难题就要想办法解决咯,一个请求,调用两个服务,同时操作更新两个数据库. ...
- The method getContextPath() from the type HttpServletRequest
在做java项目开发的时候,jsp页面很容易报出这个错误. 错误的原因很多,但是都和JRE有关. 一般在导入项目的时候容易报出这个错误,主要因为JRE(jdk版本不一致). 解决方法:就是重新配置路径 ...
- PHP之50个开源项目
GitHub上50个最受欢迎的PHP开源项目[2019] 1.Laravel Laravel是一个为Web开发者打造的PHP开发框架. GitHub Stars: 43.5k+ 网址: https:/ ...
- 不再显示广告案例(php操作cookie)
1,页面简单结构搭建 ad.html <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- 关于MVC与MVP的理解
1. MVC的理解误区 理解误区: 1. 认为Model是指失血模型的实体类(Entity),是作为View和Controller之间的传输数据. 2. 把业务逻辑全部放在Controller端,认为 ...
- php--常见算法1
<?php //递归输出123321 function digui($num){ echo $num; if($num<3){ digui($num+1); } echo $num; } ...
- Delphi ADO组件
樊伟胜
- 逆向破解H.Koenig 遥控器 Part 2
逆向破解H.Koenig 遥控器 Part 2 到目前为止,我们已经知道了RF收发器的安装过程,下面是我们所掌握的东西 : l 无线电收发器是一个Avantcom A7105 l 调制是FSK l 频 ...
- linux基础—课堂随笔07_磁盘存储和文件系统
磁盘管理 管理分区 列出块设备 lsblk parted命令 高级分区操作 用法: parted [选项]... [设备 [命令 [参数]...]...] parted /dev/sdb mkl ...