废话不多说，直接上代码

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

<!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://dy.lujianqiang.com技术支持 文章更新:http://dy.lujianqiang.com这个服务器已经关了,现在没用了 版权归抖音公司所有,该博客只是为交流学习所使 ...

  2. 生命不息学习不止，前端js学习笔记（一）

    引言 从毕业到年已经整整7年,期间一直从事.net开发做c/s从 c# 转到 wpf 而后又开始做b/s 用silverlight,从最开始的arcgis engine 到后来的silverlight ...

  3. Springmvc ajax跨域请求处理

    上次给一个网站写网站  前后端分离 最后跪在ajax跨域上面了  自己在网上找了个方法  亲试可用  记录一下 写一个类  继承HandlerInterceptorAdapter package co ...

  4. GitHub教程(一) 使用指南

    刚进公司上班的时候,技术总监让我熟悉一下Git(分布式版本控制工具)操作命令和GitHub(代码托管平台),说实话之前我也没有具体使用过Git工具,但是GitHub我还是注册过账号的.在练习将本地仓库 ...

  5. javaEE版本的eclipse中导入工程，发现server里面找不到工程，根本发布不了也不能运行

    原文:http://www.cnblogs.com/sxmcACM/p/3674545.html 1.具体解决方法 首先确保,你导入的工程所用的JDK版本和你的机器上安装的版本是同一版本, 如果不同做 ...

  6. 贴现率d与利率i

    一.复利中的实际利率 it=(1+i)t -(1+i)t-1  /   (1+i)t-1=i i 为常数, 而单利的实际利率递减 二.贴现 时间t的1元在时间零点的价值为贴现函数 记为 a-1(t) ...

  7. January 18 2017 Week 3 Wednesday

    True liberty is to have power over oneself in all things. 真正的自由是在所有的事情上都能控制住自己. Liberty isn't meanin ...

  8. Android（java）学习笔记207：Android下的属性动画（Property Animation）

    1. 属性动画(Property Animation)引入: 在手机上去实现一些动画效果算是件比较炫酷的事情,因此Android系统在一开始的时候就给我们提供了两种实现动画效果的方式,逐帧动画(fra ...

  9. BZOJ2118:墨墨的等式(最短路)

    Description 墨墨突然对等式很感兴趣,他正在研究a1x1+a2y2+…+anxn=B存在非负整数解的条件,他要求你编写一个程序,给定N.{an}.以及B的取值范围,求出有多少B可以使等式存在 ...

  10. zip 函数

    zip 函数,看上去是打包的意思,其实功能是将多个可迭代对象,组合成一个个元组. zip(iter1,iter2) a,b = zip(*zip(iter1,iter2)) a = [1,2,3] b ...