废话不多说，直接上代码

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

<!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. delphi之socket通讯

    使用了2个组建: TServerSocket TClientSocket ------------------TServerSocket--------------------------- //开启 ...

  2. 一次查找sqlserver死锁的经历

    查找bug是程序员的家常便饭,我身边的人喜欢让用户来重现问题.当然他们也会从正式服务器上下载错误log,然后尝试分析log,不过当错误不是那种不经思考就可识别的情况,他们就会将问题推向用户,甚至怪罪程 ...

  3. 应用线性代数简介 - 向量，矩阵和最小二乘法 By Stephen Boyd and Lieven Vandenberghe

    Introduction to Applied Linear Algebra – Vectors, Matrices, and Least Squares 应用线性代数简介 - 向量,矩阵和最小二乘法 ...

  4. openvpn（上）

    VPN概述:(全称Virtual Private Network)虚拟专用网络,是依靠ISP和其他的NSP,在公网中建立专用的数据通信网络的技术,可以为企业之间或者个人与企业之间提供安全的数据传输隧道 ...

  5. 【Z】扩展阿里巴巴Java开发规约插件

    https://blog.csdn.net/u014513883/article/details/79186893 1.前言 工作中难免会遇到维护别人代码的情况,那么首先就得看懂别人写的代码.如果对方 ...

  6. Sqlserver2008+搜索型注入技术

    简单的判断搜索型注入漏洞存在不存在的办法是先搜索',如果出错,说明90%存在这个漏洞.然后搜索%,如果正常返回,说明95%有洞了. 然后再搜索一个关键字,比如2006吧,正常返回所有2006相关的信息 ...

  7. Linux汉化（Cent Os汉化）

    在腾讯云上购买了Cent Os7.1的云服务器,是英文版啊,有没有?对于我这种英文的渣渣啊,所以我要用中文版,我就是这么low,怎么着呢? Ok ,在汉化之前,先查看系统的语言环境, echo $LA ...

  8. mongdb时间类型

    Date() 显示当前的时间new Date 构建一个格林尼治时间   可以看到正好和Date()相差8小时,我们是+8时区,也就是时差相差8,所以+8小时就是系统当前时间ISODate() 也是格林 ...

  9. php模板引擎的原理与简单实例

    模板引擎其实就是将一个带有自定义标签的字符串,通过相应的规则解析,返回php可以解析的字符串,这其中正则的运用是必不可少的,所以要有一定的正则基础.总体思想,引入按规则写好的模板,传递给标签解析类(_ ...

  10. 开关WI-Fi显示列表

    实现效果: 使用方法: Show-NetList     #显示Wi-Fi列表 Show-NetList -off #关闭显示 (如图) 实现代码: function Show-NetList { P ...