h5 canvas,animation动画,前台数据库,scoped锁区及一些常识

本文详细介绍了HTML5 Canvas的rect(), fillRect(), strokeRect()方法及其区别,以及fillStyle和strokeStyle的用法。还探讨了Canvas的保存和恢复状态、平移、旋转和缩放等操作。同时,讲解了CSS样式的选择器、布局和动画,如transform和transition属性。此外,文章还提到了H5的前台数据库技术,包括如何创建、插入、查询、删除和更新数据。" 104188689,9303285,在线旅游竞品分析:途牛、马蜂窝与穷游,"['产品设计', '在线旅游', '旅游App', '旅游攻略', '自助游平台']
摘要由CSDN通过智能技术生成

1. html5 rect()、fillrect()、strokeRect()的区别
2. rect() 方法是单纯的画出一个矩形框,调用stroke() 或 fill()后才会真正作用于画布。
3. .fillRect() 方法是画出一个有填充颜色的矩形框(默认是黑色的)
4. strokeRect() 方法是用一个预定义的笔触画出一个矩形框,你就可以想成使用一直有颜色的画笔去画一个矩形。
fillStyle是设置矩形框内部区域的填充颜色,strokeStyle是设置矩形边框的颜色,后两种方法可以同时使用,搭配画出一个内部有填充颜色,边框线条也带颜色的矩形。
5. 保存和恢复canvas的状态
Ctx.save()保存到堆中,ctx.restore(),恢复状态,save是把画的画布上的一些样式设置保存下来,通过restore()方法调用保存的图形样式,在画图时就是用的你所保存的样式来画图。
6. Canvas 平移,旋转,缩放
Translate() 两个·参数,一个是x轴平移距离,一个是y轴平移距离
Rotate()旋转度数 度数乘以Math.PI除以180
Scale()缩放() 两个参数,一个x轴缩放倍数,一个是y轴缩放倍数
7.canvas图片组合裁剪
globalCompositeOperation 属性设置或返回如何将一个源(新的)图像绘制到目标(已有)的图像上。
源图像 = 您打算放置到画布上的绘图。
目标图像 = 您已经放置在画布上的绘图。
ctx.fillStyle=“red”;
ctx.fillRect(20,20,75,50);目标图像
ctx.globalCompositeOperation=“source-over”;
ctx.fillStyle=“blue”;
ctx.fillRect(50,50,75,50);源图像
8.样式css 有四种 行内样式,内嵌式,外联式,导入式 @import(url()),导入式缺点是必须是html 加载完毕才会加载css,会造成样式混乱。
9.css选择器 标签选择器 类选择器 ID选择器 css 里空格代表/ 下的 逗号代表和
+选择器是紧随的同级元素元素所有元素~后面所有的同级元素>表示子元素的
A[title]设置了title属性的a标签,设置了什么属性的什么元素,元素[属性]
元素[属性=属性值]:属性的属性值为这个值的元素。元素[属性^=值]以这个值开头的属性的元素,元素[属性$=属性值]以这个值结尾的属性的元素 元素[属性
=属性值]这个属性的属性值包含这个值的元素。
10.常用属性 text-decoration样式设置下划线,上划线,删除线等。
Text-transform 样式设置文本大小写。
Letter-spacing 设置文本文字间距
Overflow:hiddle 是内容超出部分隐藏,auto是内容超出显示滚动条scroll 内容超不超出都显示滚动条
11.隐藏display:none隐藏不占位,visibility:hiddle 隐藏占位z-index控制一个块元素的层级
12背景图片background-attachment:fixed,固定背景图片到窗口某些位置background-repeat是否重复平铺慢整个区域。Background:颜色url(路径) 是否重复,是否固定,背景左边距与上边距。
13. 旋转度数 transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 /
-moz-transform:rotate(30deg); /
Firefox /
-webkit-transform:rotate(30deg); /
Safari 和 Chrome /
-o-transform:rotate(30deg); 欧朋
14. li 设置一些li标签的样式list-style-type 设置li标签前边的小点样式list-style-image设置标签之前显示

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值