废话不多说，直接上代码

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

<!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. C++模板详解（系转载，但是个人添加了一些内容）

    原文地址:http://www.cnblogs.com/gw811/archive/2012/10/25/2738929.html 零.概述 模板是C++支持参数化多态的工具,使用模板可以使用户为类或 ...

  2. android之键盘转载

    显示键盘: EditText editText.setFocusable(true); editText.setFocusableInTouchMode(true); editText.request ...

  3. 微软牛津计划——声纹识别与视频识别API上线啦！

    上个月,我们发布了牛津计划机器学习的情感识别API,能够帮助不同平台的开发者轻松添加智能应用,而无需精通人工智能领域.牛津计划仅仅是微软在人工智能领域探索中的一个实例,而我们的期望是实现更加注重个人使 ...

  4. DevExpress控件使用之多重坐标图形的绘制 z

    有时候,基于对一些年份.月份的统计,需要集成多个数值指标进行分析,因此就需要把多种数据放到一个图形里面展现,也成为多重坐标轴,多重坐标轴可以是多个X轴,也可以是Y轴,它们的处理方式类似.本文通过一个例 ...

  5. IEEP部署企业级网络工程-网络故障-环路故障

    网络故障 1.环路故障 概念 1).以太网是一个支持广播的网络, 在没有环路的环境中,广播报文在网络中以泛洪的形式被送达到网络的第一个角落,以保证每个设备都能够接受到它.每台二层设备在接收到广播报文以 ...

  6. Starting MySQL.. ERROR! The server quit without updating PID file (/var/mysql/data/feng.pid). 问题解决方案

    1.首先应该想到 授权 chown -R mysql:mysql /var/mysql/data  给mysql 用户 2.vim /etc/my.cnf [mysqld] datadir = /va ...

  7. 轻松bypass360网站卫士WAFSQL注入防护

    随便网上找了一个网站,只是测试一下,没有干非法的事情! code 区域 http://www.py-guanyun.com/CompHonorBig.asp?id=49 code 区域 http:// ...

  8. 关于一篇对epoll讲的比较好的一篇文章

    原文地址http://www.cnblogs.com/lojunren/p/3856290.html 前言 I/O多路复用有很多种实现.在linux上,2.4内核前主要是select和poll,自Li ...

  9. Java连接MQ的实例, 测试类

    package cjf.mq.mqclient; import com.ibm.mq.MQC; import com.ibm.mq.MQEnvironment; import com.ibm.mq.M ...

  10. 截取Excel字符串的部分字符

    截取Excel字符串的部分字符 我们可以使用Mid.Left.Right等函数从长字符串内获取一部分字符.  ①LEFT函数:  LEFT(text,num_chars)  Text是包含要提取字符的 ...