废话不多说，直接上代码

其中图片地址换成你的，自己玩儿去吧

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style type="text/css">

			div#a {

				width: 1105px;

				height: 500px;

				margin: 0 auto;

				border: 0px solid;

			}

		</style>

	</head>

	<body>

		<div>

   <canvas id="canvas"></canvas>

</div>

<div>

    <img id="img" style="width: 100%;height: 100%" src="#" alt="">

</div>

	</body>

</html>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript">

	//指定canvas同页面长宽一样

var H = $(window).height();

var W = $(window).width();

$("#canvas").attr({'height':H,'width':W});

//设置canvas跟屏幕一样大小

//canvas绘图

function draw(){

    var canvas = document.getElementById('canvas');

    var h = H/100;//百分1的高

    var w = W/100;//百分1的宽

    var ctx = canvas.getContext("2d");

    var imgBg = new Image();

    imgBg.src = 'img/banner_bg.png'

    var img1 = new Image();

    img1.src = 'img/b631fc34b1563f7ab0af948e5bd8d19e.jpg';

    window.onload = function(){

        ctx.drawImage(imgBg,0,0,750,1208,0,0,W,H)

        ctx.drawImage(img1,0,0,600,500,400,200,500,500)//设置图片比例和位置,匹配手机屏幕

        //绘制简单的文字

        ctx.fillStyle = "rgba( 0, 0, 0, 1)"; // black color

        ctx.font="40px Arial";

        ctx.fillText("托尼斯塔克",100,300);

        //生成的data的路径,可以通过php生成图片存到数据库,单存data路径不合适,高清图片情况下会出现图片的残缺

        var srccc = canvas.toDataURL("image/png");

        console.log(srccc)

        $("#img").attr("src",srccc);

    }

}

draw();

</script>

　　如下图：上边为canvas绘制的图片，下边是有canvas生成的图片链接（<img src=" "/>）

ok,好兄弟们拿走不谢

canvas 将html绘制图片 生成图片链接的更多相关文章

  1. canvas - drawImage()方法绘制图片不显示的问题

    canvas有个很强大的api是drawImage()(w3c): 他的主要功能就是绘制图片.视频,甚至其他画布等.   问题: 慕名赶来,却一脚踩空,低头一看,地上一个大坑. 事情是这样的,在我看完 ...

  2. Android Canvas使用drawBitmap绘制图片

    1.基本的绘制图片方法 //Bitmap:图片对象,left:偏移左边的位置,top: 偏移顶部的位置 drawBitmap(Bitmap bitmap, float left, float top, ...

  3. android中Canvas使用drawBitmap绘制图片

    1.主要的绘制图片方法 //Bitmap:图片对象,left:偏移左边的位置,top: 偏移顶部的位置     drawBitmap(Bitmap bitmap, float left, float ...

  4. Canvas中 drawImage绘制图片不显示

    在学习 html5中的 Canvas.drawImage时写了如下代码: <!doctype html> <html> <head><title>研究& ...

  5. 软件项目技术点(8)—— canvas调用drawImage绘制图片

    AxeSlide软件项目梳理   canvas绘图系列知识点整理 html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本 ...

  6. 关于Chrome和Opera中draw Image（）方法无法在canvas画布中绘制图片的问题

    var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=d ...

  7. Canvas 中drawImage 绘制不出图片

    在使用Canvas的drawImage绘制图片时,却发现绘制不出图片,原因是图片是异步加载,图片加载完再绘制. //html <img src="1.png" /> & ...

  8. 使用html5 canvas绘制图片

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  9. canvas绘制图片

    canvas保存为data:image扩展功能的实现 [已知]canvas提供了toDataURL的接口,可以方便的将canvas画布转化成base64编码的image.目前支持的最好的是png格式, ...

随机推荐

  1. ANN神经网络——实现异或XOR (Python实现)

    一.Introduction Perceptron can represent AND,OR,NOT 用初中的线性规划问题理解 异或的里程碑意义 想学的通透,先学历史! 据说在人工神经网络(artif ...

  2. 【JAVA语法】03Java-继承性

    继承的实现 继承的限制 子类对象的实例化 方法的重写 Super关键字 重写与重载的区别 final关键字 抽象类 接口 一.继承的实现 1.1 格式 class 子类 extends 父类 {} c ...

  3. redis在linux设置密码

    redis默认是没有密码的,如果需要设置可以这样设置. 1.找到本机的/etc/redis.conf 文件,找到如下行 #requirepass foobared 去掉前面的密码,并自己设置密码 re ...

  4. STL算法分类记忆

    STL算法主要是我们强大的标准库中以迭代器或数值或函数对象为参数预先定义好的一系列算法操作. 在STL算法分类中首先要提的就是两个普遍存在的后缀: _if _copy 其中这两个后缀的作用分别是:一. ...

  5. easyUI datagrid 重复发送URL请求

    如果在table属性中配置了URL参数,在初始化datagrid时,会发送一次url请求.或者在js中datagrid{url:''}时,也会自动发送一次url请求. 在初始化datagrid时,我并 ...

  6. February 1 2017 Week 5 Wednesday

    If you can't get a miracle, become one. 如果奇迹没有眷顾你,那就让自己变成奇迹吧. If you think you are bad luck, you did ...

  7. Java使用iText生成word文件的完美解决方案（亲测可行）

    JAVA生成WORD文件的方法目前有以下种: 一种是jacob 但是局限于windows平台 往往许多JAVA程序运行于其他操作系统 在此不讨论该方案 一种是pio但是他的excel处理很程序 wor ...

  8. Join Resig's “Simple JavaScript Inheritance ”

    ======================Enein翻译=========================           John Resig 写了一篇关于 JavaScript 里类似其它语 ...

  9. BZOJ2160:拉拉队排练(Manacher)

    Description 艾利斯顿商学院篮球队要参加一年一度的市篮球比赛了.拉拉队是篮球比赛的一个看点,好的拉拉队往往能帮助球队增加士气,赢得最终的比赛.所以作为拉拉队队长的楚雨荨同学知道,帮助篮球队训 ...

  10. [Raspberry]001Ubuntu下查看linux版本，内核版本，系统位数，gcc版本

    1. 查看linux版本  sunny@ubuntu:~$cat /etc/issueUbuntu 11.04 \n \l 2. 查看内核版本1) sunny@ubuntu:~$ cat /proc/ ...