web前端
文章平均质量分 52
hyxx
这个作者很懒,什么都没留下…
展开
-
Canvas补充接口
阴影context.shadowColor//指定阴影的位移值 context.shadowOffsetX context.shadowOffsetY//指定阴影的模糊距离 context.shadowBlurcontext.fillStyle = 'red'; context.shadowColor = 'gray'; context.shadowOffsetX原创 2016-11-03 14:53:31 · 818 阅读 · 0 评论 -
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 · 1338 阅读 · 0 评论 -
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 · 682 阅读 · 0 评论 -
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 · 1000 阅读 · 0 评论 -
Canvas小demo(直线和曲线绘制出一个星空,月亮,绿地)
主要包含的知识点:直线绘制径向渐变(绘制天空井深的情况,由蓝变黑)五角星数学知识,点与点之间的角度为72deg。。。图形变换与状态保存弧线绘制月亮(arc,arcTo)贝塞尔曲线绘制绿地(bezierCurveTo)线性渐变(绿地颜色从远到近是由深到浅)请看完整代码<!DOCTYPE html> <html lang="en"> <head> <met原创 2016-10-28 16:23:24 · 1189 阅读 · 0 评论 -
Canvas绘图接口(曲线)
绘制一段弧线使用arc()绘制弧线context.arc( centerx,centery,radius,//圆心坐标,圆弧的半径 startingAngle,endingAngle,//开始角度,结束角度 anticlockwise=false//可选,是都是逆时针的绘制,默认false顺时针绘制)<script type="text/javascript">原创 2016-10-27 18:44:54 · 1443 阅读 · 0 评论 -
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 · 774 阅读 · 0 评论 -
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 · 327 阅读 · 0 评论 -
Canvas浏览器兼容
判断当前浏览器是否兼容比如,判断arc()函数,当前浏览器是否兼容if(canvas.arc){}else{ alert('当前浏览器不支持arc')}浏览器不支持canvas时显示内容canvas标签中不能添加别的html标签,因为canvas里面显示的内容时如果当前浏览器不支持canvas时显示的内容<canvas> 当前浏览器支持canvas,请更换浏览器后重试</canv原创 2016-11-03 15:01:32 · 2263 阅读 · 0 评论 -
IE和移动端兼容性
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 · 648 阅读 · 0 评论