sunli0205

2017年1月4日

摘要： SVG是基于XML的图形语言，在DOM解析中其每个元素都是可以用的，这样就可以为SCG元素附加JavaScript事件处理器，实现更加丰富的效果。在SVG中，每个被绘制的图形均被视为对象，如果SVG对象的属性发生变化，那么浏览器能够自动重现图形。 Canvas通过JavaScript来绘制二维图形阅读全文

posted @ 2017-01-04 22:23 sunli0205 阅读(228) 评论(0) 推荐(0) 编辑

HTML中的SVG

摘要： HTML5中的SVG是Scalable Vector Graphic的简称，是一种用来绘制矢量图的HTML5标签，由万维网联盟定制，是一个基于可扩展标记语言，用于绘制二维可缩放矢量图形。是一种使用XML描述二维图形的语音，允许三种类型的图形对象：矢量图形、图像和文本。 1.绘制一个圆 2.绘制简单阅读全文

posted @ 2017-01-04 22:12 sunli0205 阅读(875) 评论(0) 推荐(1) 编辑

Canvas绘制时钟

摘要： ①首先在HTML的body标签中添加一个canvas标签，用于绘制时钟。 ②在JavaScript中通过getElementById函数得到Canvas对象，并创建画笔。 ③定义三个变量，slen表示秒针，mlen表示分钟，hlen表示时针，并分别赋值。 ④开始绘制图形，设置填充色，以坐标点（200 阅读全文

posted @ 2017-01-04 09:56 sunli0205 阅读(328) 评论(0) 推荐(0) 编辑

2017年1月3日

用Canvas实现动画效果

摘要： 1.清除Canvas的内容 clearRect(x,y,width,height)函数用于清除图像中指定矩形区域的内容显示： 2.创建动画步骤1：指定坐标点（100,100）为圆心，绘制半径为0的圆；步骤2：间隔10秒后，清除之前绘制的图形；步骤3：再次以坐标点（100,100）为圆心，绘制阅读全文

posted @ 2017-01-03 20:26 sunli0205 阅读(1581) 评论(0) 推荐(0) 编辑

绘制文字

摘要： 1.控制文本的字体、大小和样式 2.控制文本的颜色两种方式：一通过fillStyle函数设置文本的填充颜色，另一种是通过createLinearGradient函数为文字填充渐变色： 3.描绘文本的边缘使用strokeText函数代替fillText函数，同时要用strokeStyle属性替代f 阅读全文

posted @ 2017-01-03 13:54 sunli0205 阅读(199) 评论(0) 推荐(0) 编辑

2017年1月2日

html5图像组合

摘要：一图像组合 1.绘制阴影在绘制阴影效果时，需要使用Canvas的多个属性配合完成 shadowBlur设置阴影的迷糊级数 shadowOffsetX设置形状与阴影的水平距离 shadowOffsetY设置形状与阴影的垂直距离 shadowColor设置阴影的颜色显示： shadowOffset 阅读全文

posted @ 2017-01-02 20:56 sunli0205 阅读(405) 评论(0) 推荐(0) 编辑

Canvas绘制渐变

摘要： 1.绘制线性渐变 Canvas提供了用于创建线性渐变的函数createLinearGradient（x0,y0,x1,y1）,坐标点（x0,y0）是起点，（x1,y1）是终点创建一个渐变色定义渐变色颜色设置Canvas内容的fillStyle为当前的渐变对象，并且绘制这个图形一个线性渐变的阅读全文

posted @ 2017-01-02 16:44 sunli0205 阅读(7778) 评论(0) 推荐(0) 编辑

2017年1月1日

Canvas绘制图形

摘要： 1.Canvas绘制一个蓝色的矩形显示 2.绘制基本的直线 ①绘制直线显示： ② 绘制二次曲线：是直线锥面的两腔被一平面所截而得的曲线。二次曲线由一个起点、一个终点和一个控制点决定，当控制点经过圆锥顶点时，曲线变成一个点、直线或者相交直线，当控制点不经过圆锥顶点时，曲线可能是圆、锥圆、双曲线或阅读全文

posted @ 2017-01-01 13:32 sunli0205 阅读(259) 评论(0) 推荐(0) 编辑

2016年12月31日

摘要： <meta name="viewport" content="width=device-width,initical-scale=1"的作用> content属性值 : width:可视区域的宽度，值可为数字或关键词device-width height:同width intial-scale:页面阅读全文

posted @ 2016-12-31 11:39 sunli0205 阅读(731) 评论(0) 推荐(0) 编辑

HTML5视频播放

摘要： 1.检测浏览器是否支持html5视频播放 2.视频里面的标签 1. autoplay 自动播放视频文件 2.preload 预加载。提供三个可供选择的值：none表示不进行预加载；metadata表示仅加载元数据，即音频文件的大小、第一帧、播放列表和持续时间等；auto表示预加载全部音频文件 3.p 阅读全文

posted @ 2016-12-31 10:56 sunli0205 阅读(287) 评论(0) 推荐(0) 编辑

公告