脚本宝典收集整理的这篇文章主要介绍了html5教程-canvas 三 图片插入及文字填充，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
/** * canvas插入图片 * 等图片加载完，在执行canvas操作 * 图片预加载：在onload 中调用方法 * drawImage(oImg,x,y,w,h) * oImg:图片x,y坐标 * w,h宽高 * * 设置背景 * createPattern(oImg,平铺方式) * repeat,repeat-x,repeat-y,no-repeat * * 渐变 * createLinearGradient(x1,y1,x2,y2) * createRadialGradient(x1,y1,r1,x2,y2,r2) * 第一个圆的坐标及半径 * * canvas填充文本 * strokeText(文字,x,y) 文字边框的填充 * fillText(文字,x,y) * font * textAlign * textBaseline * measureText() * measureText(str).width;只有宽度没有高度 * 阴影 * shadowOffsetX shadowOffsetY * shadowBlur 高斯模糊值 * shadowColor 阴影颜色 */ var oc = document.getElementById("canvas"); var ogc = oc.getContext('2d'); //插入图片 var yImg = new Image(); yImg.onload = function(){ draw(this); } yImg.src = 'wennuan.jpg'; function draw(obj){ ogc.drawImage(obj,100,0); } //颜色渐变 var obj = ogc.createLinearGradient(150,100,150,200); obj.addColorStop(0,'red'); obj.addColorStop(1,'blue'); ogc.fillStyle = obj; ogc.fillRect(150,100,100,100); //径向渐变 var obj = ogc.createRadialGradient(200,200,100,200,100,150); addColorStop(0,'red'); addColorStop(0.5,'yellow'); addColorStop(1,'blue'); ogc.fillStyle(obj); ogc.fillRect(0,0,oc.width,oc.height); //文字填充 ogc.font = '30px fontFamilu';//第二个参数必填 ogc.textBaseLine = 'top'; //top middle bottom var w = ogc.measureText('文字'); ogc.fillText("文字",(oc.width-w)/2,(oc.height-60)/2); //文字居中水平垂直 ogc.strokeText('文字',0-,200);
/** * canvas插入图片 * 等图片加载完，在执行canvas操作 * 图片预加载：在onload 中调用方法 * drawImage(oImg,x,y,w,h) * oImg:图片x,y坐标 * w,h宽高 * * 设置背景 * createPattern(oImg,平铺方式) * repeat,repeat-x,repeat-y,no-repeat * * 渐变 * createLinearGradient(x1,y1,x2,y2) * createRadialGradient(x1,y1,r1,x2,y2,r2) * 第一个圆的坐标及半径 * * canvas填充文本 * strokeText(文字,x,y) 文字边框的填充 * fillText(文字,x,y) * font * textAlign * textBaseline * measureText() * measureText(str).width;只有宽度没有高度 * 阴影 * shadowOffsetX shadowOffsetY * shadowBlur 高斯模糊值 * shadowColor 阴影颜色 */ var oc = document.getElementById("canvas"); var ogc = oc.getContext('2d'); //插入图片 var yImg = new Image(); yImg.onload = function(){ draw(this); } yImg.src = 'wennuan.jpg'; function draw(obj){ ogc.drawImage(obj,100,0); } //颜色渐变 var obj = ogc.createLinearGradient(150,100,150,200); obj.addColorStop(0,'red'); obj.addColorStop(1,'blue'); ogc.fillStyle = obj; ogc.fillRect(150,100,100,100); //径向渐变 var obj = ogc.createRadialGradient(200,200,100,200,100,150); addColorStop(0,'red'); addColorStop(0.5,'yellow'); addColorStop(1,'blue'); ogc.fillStyle(obj); ogc.fillRect(0,0,oc.width,oc.height); //文字填充 ogc.font = '30px fontFamilu';//第二个参数必填 ogc.textBaseLine = 'top'; //top middle bottom var w = ogc.measureText('文字'); ogc.fillText("文字",(oc.width-w)/2,(oc.height-60)/2); //文字居中水平垂直 ogc.strokeText('文字',0-,200);
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的html5教程-canvas 三 图片插入及文字填充全部内容，希望文章能够帮你解决html5教程-canvas 三 图片插入及文字填充所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。