废话不多说，直接上代码

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

<!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. swoole 创建web服务器

    http_server.php $http = new swoole_http_server("0.0.0.0", 9501); // 请求监听事件 $http->on('r ...

  2. js 时间格式化 （兼容safari）

    js 时间格式化,兼容IE8和safari浏览器. function formatDate(date, fmt, near, type) { var dateStr = date; if (!date ...

  3. java面试题之----IO与NIO的区别

    JAVA NIO vs IO 当我们学习了Java NIO和IO后,我们很快就会思考一个问题: 什么时候应该使用IO,什么时候我应该使用NIO 在下文中我会尝试用例子阐述java NIO 和IO的区别 ...

  4. SQL Server 使用 OUTPUT做数据操作记录

    OUTPUT 子句 可以在数据进行增删改的时候,可以返回受影响的行.先准备一张表 create table #t ( id int identity primary key ,name ) ) go ...

  5. linux(centos)设置tomcat开机启动

    方法一: linux 下tomcat开机自启动修改Tomcat/bin/startup.sh 为: export JAVA_HOME=/usr/java/j2sdk1.4.2_08 export CL ...

  6. poj1322 Chocolate 【 概率DP 】

    题目链接:poj1322 Chocolate [概率DP ] 题意:袋中有C种颜色巧克力,每次从其中拿出一块放桌上,如果桌上有两块相同颜色巧克力则吃掉,问取出N块巧克力后,求桌上正好剩下M块巧克力的概 ...

  7. android之对于view的一点深入理解

    最近在写程序中,遇到了之前自己没遇到过的代码,一番理解后才知道原来是在动态设定xml布局中的属性.即利用LayoutParams可以动态的设定布局或者控件的宽和高,以及的它的左间距,右间距,内间距,和 ...

  8. nssm 在windows上部署服务

    简介 NSSM是一款可将Nodejs项目注册为Windows系统服务的工具.当你的Node.js项目需要部署在Windows Server上时,NSSM是一个不错的选择. 特点 NSSM将Node.j ...

  9. 大数据-图表插件-echarts 样式修改（迭代）

    修改折线图大小   myChart.setOption({             title:{                     text:"价格指数"          ...

  10. 移动端 Touch 事件

    在移动端页面开发时,常常会用到touch事件,比如左滑右滑的轮播等.常用的触摸事件有touchstart,touchmove,touchend. 每个事件包含下面三个用于跟踪虎摸的属性: touche ...