hyxx-CSDN博客

原创 Canvas图像处理

drawImage绘图第一个对象可以使image，canvas，video等其他对象 drawImage的第一个参数不一定就是image，也可以是一个canvas 也就是说我们可以给一个canvas中放图片或者绘图，然后再用drawImage将它画出来context.drawImage(image/canvas,dx,dy)dx,dy表示绘制图片的起始坐标context.

2016-11-11 10:35:50 1047

原创 Canvas浏览器兼容

判断当前浏览器是否兼容比如，判断arc()函数，当前浏览器是否兼容if(canvas.arc){}else{ alert('当前浏览器不支持arc')}浏览器不支持canvas时显示内容canvas标签中不能添加别的html标签，因为canvas里面显示的内容时如果当前浏览器不支持canvas时显示的内容<canvas> 当前浏览器支持canvas，请更换浏览器后重试</canv

2016-11-03 15:01:32 2307

原创 Canvas补充接口

阴影context.shadowColor//指定阴影的位移值 context.shadowOffsetX context.shadowOffsetY//指定阴影的模糊距离 context.shadowBlurcontext.fillStyle = 'red'; context.shadowColor = 'gray'; context.shadowOffsetX

2016-11-03 14:53:31 859

原创 Canvas实现绚丽的倒计时效果（动画效果）

HTMLhtml很简单，引入两个文件digit.js：存放每个数字的点阵数据 countdown.js：主要逻辑<!DOCTYPE html><html lang="en"><head>![这里写图片描述](http://img.blog.csdn.net/20161101175756119) <meta charset="UTF-8"> <title>绚丽的倒计时效果</ti

2016-11-01 18:06:46 1365

原创 Canvas文字渲染

font属性font属性可以接收像css里面font属性一样的字符串粗体 40px 字体 context.font = ‘bold 40px Arial’;@param {[type]} string [想要书写的字符串] @param {[type]} x [字符串的位置x坐标] @param {[type]} y [字符串的位置Y坐标] @param {

2016-10-28 18:38:27 702

原创 Canvas小demo(直线和曲线绘制出一个星空，月亮，绿地)

主要包含的知识点：直线绘制径向渐变(绘制天空井深的情况，由蓝变黑)五角星数学知识，点与点之间的角度为72deg。。。图形变换与状态保存弧线绘制月亮（arc,arcTo）贝塞尔曲线绘制绿地(bezierCurveTo)线性渐变(绿地颜色从远到近是由深到浅)请看完整代码<!DOCTYPE html> <html lang="en"> <head> <met

2016-10-28 16:23:24 1214

原创 Canvas绘图接口(曲线)

绘制一段弧线使用arc()绘制弧线context.arc( centerx,centery,radius,//圆心坐标，圆弧的半径 startingAngle,endingAngle,//开始角度，结束角度 anticlockwise=false//可选，是都是逆时针的绘制，默认false顺时针绘制)<script type="text/javascript">

2016-10-27 18:44:54 1461

原创 Canvas绘图接口(直线)

规划矩形路径（需要自己进行填充和绘制）/**这里需要传入x----起始的X坐标y----起始的Y坐标width----矩形的宽height----矩形的高*/context.rect(x,y,width,height);context.lineWidth = 10;context.fillStyle = 'red';context.fill();context.stroke()

2016-10-27 16:46:55 793

原创 Canvas绘图之旅

canvas是基于状态的绘制画一条线条HTML<canvas id='canvas'></canvas><script type="text/javascript"> var canvas = document.getElementById('canvas'); canvas.width = 500; canvas.height = 500;

2016-10-26 18:20:07 342

IE和移动端兼容性1. IE8及以下，不支持document.getElementsByName来获取元素，所以想要兼容IE8，建议使用getElementById来获取2. section是H5中新加的元素，在IE8下面不能用，会把section里面的内容解析到外面，这样样式会有错乱，所以，建议使用div来包裹内容3. 判断是否是移动设备if ( /android|webos|iphone|ipa

2016-10-26 11:32:40 678

转载 H5调用本地的照相机，摄像机等设备

Htm代码： capture表示，可以捕获到系统默认的设备，比如：camera--照相机；camcorder--摄像机；microphone--录音。accept表示，直接打开系统文件目录。其实html5的input:file标签还支持一个multiple属性，表示可以支持多选，如：加上这个multiple后，capture

2016-10-18 17:07:17 5871

xxhy的博客