canvas基础知识点(一)
时间:2019-12-14
本文章向大家介绍canvas基础知识点(一),主要包括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)
原文地址:https://www.cnblogs.com/homehtml/p/12039701.html
- 【自然框架】QuickPager分页控件,新增一种分页方式——伪URL分页(Postback版)
- 我们的漏洞Webug 3.0中级进阶攻略(上)
- 【自然框架】QuickPager分页控件的总体介绍和在线演示
- 在C++中反射调用.NET(三) 使用非泛型集合的委托方法C++中的列表对象list C++传递集合数据给.NET创建泛型List实例反射静态方法反射调用索引器当委托遇到协变和逆变C++/CLI
- 如何使用树莓派自制网络监视器
- 利用雅虎小型企业服务平台的目录遍历漏洞查看客户的信用卡信息
- 【自然框架】QuickPager asp.net 分页控件的Ajax分页方式。
- 骑行在华盛顿 针对320万次共享单车骑行数据的分析
- 【自然框架】QuickPagerSQL——专门生成分页用的SQL的类库
- 【数据科学】数据科学中的 Spark 入门
- 【自然框架】QuickPager分页控件的单独的源码 V2.0.4.2。
- 用 iPhoneX 的 FaceID 刷脸解锁真的靠谱吗?
- 【自然框架】用CMS的栏目举例,聊一聊从“一层”到“三层”的变化
- java如何自定义鼠标指针
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- rocketmq broker启动报错,找不到或无法加载主类
- 视频监控联网RTSP平台EasyNVR用户管理权限与实际权限不匹配,该如何排查?
- 2020CHINC,来赴一场“共建智慧医院”的约会
- 《闲扯Redis十》Redis 跳跃表的结构实现
- 图数据库HugeGraph源码解读 (1) —— 入门介绍
- String及StringTable(一):String源码解读
- 四、原型模式与建造者模式详解
- LeetCode 23. 移动零
- LeetCode 11. 盛最多水的容器
- 29.MyBatis体系结构与工作原理
- 五、代理模式详解
- 六、门面模式与装饰器模式详解
- 七、享元模式与门面模式详解
- 如何白嫖3个月的JetBrains全家桶(包括Java神器IDEA)
- 潘石屹用Python解决100个问题 | 打印菱形