html5教程-canvas 三 图片插入及文字填充

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

 /**  * canvas插入图片  * 等图片加载完，在执行canvas操作  *   图片预加载：在onload 中调用方法  * drawImage(o img ,x,y,w,h)  *   oImg:图片x,y坐标  *   w,h 宽 高  *   * 设置背景  * createPattern(oImg,平铺方式)  *   re PE at,repeat-x,repeat-y,no-repeat  *   * 渐变  *  createLine arg ra die nt(x1,y1,x2,y2)  *  createRadialGradient(x1,y1,r1,x2,y2,r2)  *   第一个 圆 的坐标及 半 径  *   * canvas填充文本  *   stroke Text(文字,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(& # 39;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.h ei ght); //文字填充 ogc.font = '30px fontF ami lu';//第二个参数必填 ogc.textBaseLine = 'top'; //top middle bottom var w = ogc.measureText('文字'); ogc.fillText("文字",(oc.width-w)/2,(oc.height-60)/2); // 文字居中 水平垂直 ogc.strokeText('文字',0-,200);

&nbs p;

 /**  * 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 fontF am ilu';//第二个参数必填 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 三 图片插入及文字填充 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于html5教程-canvas 三 图片插入及文字填充的详细内容...