冰凌2015 - 博客园

2015年4月15日

摘要：案例1：您的浏览器不支持效果图：注释：（1）绘制图像时，需要使用drawImage方法：方法1：cxt.drawImage(image,x,y); image是一个Image对象，用该对象来装载图像文件。x与y为绘制时该图像在画布中的起始坐标。方法2：cxt.... 阅读全文

posted @ 2015-04-15 18:33 冰凌2015 阅读(310) 评论(0) 推荐(0) 编辑

HTML5画布（阴影）

摘要：案例1：您的浏览器不支持效果图：注释：（1）shadowOffsetX--阴影的横向位移量，即图形横向方向移动的距离； shadowOffsetY--阴影的纵向位移量，即纵向方向移动的距离； shadowColor--阴影的颜色； ... 阅读全文

posted @ 2015-04-15 16:04 冰凌2015 阅读(647) 评论(0) 推荐(0) 编辑

HTML5画布（变形）

摘要：坐标变换案例1：您的浏览器不支持效果图：注释：（1）平移 cxt.translate( x , y ); translate方法使用两个参数，x表示将坐标轴原点向左移动多少个单位，默认情况下为像素，y表示将坐标轴原点向下移动多少个单位。（2）扩大 cxt.s... 阅读全文

posted @ 2015-04-15 15:42 冰凌2015 阅读(474) 评论(0) 推荐(0) 编辑

2015年4月10日

HTML5画布（线条、渐变）

摘要：绘制直线时，一般会用到moveTo与lineTo两种方法。案例1：您的浏览器不支持效果图：注释：（1）moveTo( x , y ); 该方法的作用是将光标移动到指定坐标点，绘制直线的时候以这个坐标点为起点；（2）lineTo( x , y ); 该方法在move... 阅读全文

posted @ 2015-04-10 16:33 冰凌2015 阅读(1171) 评论(0) 推荐(1) 编辑

HTML5画布（圆形）

摘要：案例1：您的浏览器不支持效果图：注释：（1）开始创建路径： cxt.beginPath();（2）创建圆形路径： cxt.arc( x , y , radius , startAngle , endAngle , anticlockwise ) x为绘制圆形... 阅读全文

posted @ 2015-04-10 09:47 冰凌2015 阅读(2209) 评论(0) 推荐(1) 编辑

2015年4月9日

HTML5画布（矩形）

摘要： canvas元素用于绘制图形。canvas元素是HTML5中新增的一个重要元素，元素本身是没有绘图能力，所有的绘制工作必须在javascript内部完成。案例1：您的浏览器不支持效果图：注释：（1）getContext("2d")对象是内建的HTML5对象，可以绘制多种图形，... 阅读全文

posted @ 2015-04-09 17:26 冰凌2015 阅读(319) 评论(0) 推荐(0) 编辑

HTML5拖放

摘要：拖放，即将一个东西拖到另一个位置。案例1： //ondrop----------进行放置；//ondragover------把图片拖动到哪里；//draggable-------属性设置为true，即图片可拖动；//ondragstart-----拖动图片；效果图：（浏览器支持情况下... 阅读全文

posted @ 2015-04-09 14:51 冰凌2015 阅读(324) 评论(0) 推荐(0) 编辑

HTML5音频

摘要：用来播放声音文件。案例1：您的浏览器不支持audio标签效果图：（浏览器支持情况下）注释：（1）autoplay、controls、loop、preload等功能与视频功能类似，此处就不多解释了^-^；阅读全文

posted @ 2015-04-09 13:37 冰凌2015 阅读(220) 评论(0) 推荐(0) 编辑

HTML5视频

摘要：标签用于定义视频。案例1：您的浏览器不支持video标签效果图1（浏览器支持）效果图2（浏览器不支持）注释：（1）controls 用于向用户显示播放、暂停和音量按钮，属性值为：controls；（2）autoplay 用于控制视频就绪后马上播放，属性值为：a... 阅读全文

posted @ 2015-04-09 13:24 冰凌2015 阅读(193) 评论(0) 推荐(0) 编辑