网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

标题	HTML5 canvas基本绘图之填充样式实现
内容	<canvas></canvas>是HTML5中新增的标签，用于绘制图形，这篇文章主要为大家详细介绍了HTML5 canvas基本绘图之绘制填充方法，感兴趣的小伙伴们可以参考一下     <canvas></canvas>是HTML5中新增的标签，用于绘制图形，实际上，这个标签和其他的标签一样，其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象，我们可以通过JavaScript脚本来控制该对象进行绘图。     <canvas></canvas>只是一个绘制图形的容器，除了id、class、style等属性外，还有height和width属性。在<canvas>>元素上绘图主要有三步：     1.获取<canvas>元素对应的DOM对象，这是一个Canvas对象；     2.调用Canvas对象的getContext()方法，得到一个CanvasRenderingContext2D对象；     3.调用CanvasRenderingContext2D对象进行绘图。     填充样式     前面用到的fillStyle和strokeStyle除了设置颜色外，还能设置其他填充样式，这里以fillStyle为例：     •线性渐变     使用步骤      （1）var grd = context.createLinearGradient( xstart , ystart, xend , yend )创建一个线性渐变，设置起始坐标和终点坐标；      （2）grd.addColorStop( stop , color )为线性渐变添加颜色，stop为0~1的值；      （3）context.fillStyle=grd将赋值给context。     •径向渐变      该方法与线性渐变使用方法类似，只是第一步接收的参数不一样      var grd = context.createRadialGradient(x0 , y0, r0 , x1 , y1 , r1 );接收起始圆心的坐标和圆半径以及终点圆心的坐标和圆的半径。     •位图填充      createPattern( img , repeat-style )使用图片填充，repeat-style可以取repeat、repeat-x、repeat-y、no-repeat。      JavaScript Code     var canvas = document.getElementById("canvas");            var context = canvas.getContext("2d");            //线性渐变            var grd = context.createLinearGradient( 10 , 10, 100 , 350 );            grd.addColorStop(0,"#1EF9F7");            grd.addColorStop(0.25,"#FC0F31");            grd.addColorStop(0.5,"#ECF811");            grd.addColorStop(0.75,"#2F0AF1");            grd.addColorStop(1,"#160303");            context.fillStyle = grd;            context.fillRect(10,10,100,350);            //径向渐变            var grd = context.createRadialGradient(325 , 200, 0 , 325 , 200 , 200 );            grd.addColorStop(0,"#1EF9F7");            grd.addColorStop(0.25,"#FC0F31");            grd.addColorStop(0.5,"#ECF811");            grd.addColorStop(0.75,"#2F0AF1");            grd.addColorStop(1,"#160303");            context.fillStyle = grd;            context.fillRect(150,10,350,350);            //位图填充            var bgimg = new Image();            bgimg.src = "background.jpg";            bgimg.onload=function(){                var pattern = context.createPattern(bgimg, "repeat");                context.fillStyle = pattern;                context.strokeStyle="#F20B0B";                context.fillRect(600, 100, 200,200);                context.strokeRect(600, 100, 200,200);            };        效果如下：          以上就是本文的全部内容，希望对大家的学习有所帮助
随便看	绵阳市安县2015年招聘乡镇义务教育学校艺体教师人数/岗位/年龄及其他要求条件表 2015年成都德圣中等职业学校各专业教师招聘信息 蚌埠市固镇县2015年县城学校选聘教师面试有关事项通知 2015年临沂市沂南县事业单位招聘工作人员普通教师类岗位面试通知书领取通知 2015年无锡市滨湖区教育系统招聘教师报名所需材料表 蚌埠市固镇县2015年县城学校选聘教师面试人员名单 2015年青岛市城阳街道办事处非事业编制幼儿教师招聘简章 2015年临沂市郯城县事业单位招聘工作人员普通教师类岗位面试通知书领取通知 2015年临沂市临沭县事业单位招聘工作人员普通教师类岗位面试通知书领取通知 2015年潍坊市临朐县招考教师综合成绩公示 2015年德州市庆云县第一中学教师招聘简章 2015年临沂市兰山区事业单位招聘工作人员普通教师类岗位试讲内容范围 2015年青岛市黄岛区灵珠山街道办事处中心幼儿园招聘幼儿教师简章 2015年临沂市兰山区事业单位招聘工作人员普通教师类岗位面试通知书领取通知 邯郸市成安县延长2015年招聘教师登统时间公告 2015年承德市双桥区招聘教师公告(四) 2015年承德市双桥区招聘教师公告(三) 2015年无锡市滨湖区招聘教师岗位表 吉安市吉水县教育系统2015年招聘教师面试体检聘用工作实施方案 2015年聊城市高新区事业单位招聘工作人员总成绩及进入考察体检范围人员名单通知 蚌埠市固镇县2015年县城学校选聘教师面试有关事项通知 2015年深圳市宝安区华南中英文学校急聘初中语文/数学/英语/小学语文/体育/音乐启事 2015年衡阳市耒阳市招聘农村小学教师考核完成 永州市宁远县2015年招聘教师资格审查递补合格人员名单 2015年宣城市郎溪县招(选)聘教师笔试成绩公示 public ownership public-ownership public pension public perception public philosophy public plaza public policy public-policy public-private public-private 闲账 闲蹓 闲适 闲逛 闲逸 闲钱 闲闲 闲雅 闲静 闲食 大学生律所实习个人总结 园艺专业实习总结范文（精选20篇） 乡村教师培训工作总结模板 实习生工作小结报告5篇 最新妇产科实习个人工作总结范文_妇产科实习工作总结5篇 毕业生银行实习总结与心得 大学生实习鉴定表个人总结 行政助理实习总结3000字 法院实习生工作总结报告 电子厂顶岗实习总结

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。