文档章节

H5 canvas 测试

519617
 519617
发布于 2017/05/18 15:47
字数 182
阅读 24
收藏 0

 本测试包括在画布上画矩形,线,圆,以及颜色的渐变,实心,空心字,引入图片等。

效果:

代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>canvasTest</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
window.onload=function(){
	can01();
	can02();
}

function can01(){
	var c=$("#can01")[0];
	var ctx=c.getContext("2d");
	// 创建渐变
	var grd=ctx.createLinearGradient(0,0,200,0);
	grd.addColorStop(0,"red");
	grd.addColorStop(1,"white");
	ctx.fillStyle=grd;
	//矩形
	ctx.fillRect(0,0,200,100);
	//线条
	ctx.moveTo(0,0);
	ctx.lineTo(400,200);
	ctx.stroke();
	//圆
	ctx.beginPath();
	ctx.arc(95,50,40,0,2*Math.PI);
	ctx.stroke();
	//文本
	ctx.font="30px Arial";
	ctx.fillText("Hello World",10,150);
	ctx.strokeText("Hello World",10,100);
}
function can02(){
	var c=$("#can02")[0];
	var ctx=c.getContext("2d");
	// 创建渐变
	var img = new Image();
    img.src = "image.jpg";
	img.onload = function() {
		ctx.drawImage(img,10,10);
	} 
}
</script>
<style>
.can{
width:400px;
height:200px;
border:1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="can01" class="can"></canvas>
<canvas id="can02" class="can"></canvas>
</body>
</html>

 

© 著作权归作者所有

519617
粉丝 2
博文 51
码字总数 33472
作品 0
东城
私信 提问
[前端][微信浏览器/canvas]长按二维码图片无法扫描问题的解决方法

最近开发H5,用户浏览的环境主要是在微信下。 H5的最后一页是用canvas的toDataUrl生成了一个base64的图片,然后放到img标签里放在最顶上,让用户可以长按图片保存和扫描二维码。 但是实际测试...

江湖游医黄半仙
2018/04/24
0
0
一文彻底解决H5页面中长按保存图片

本文详细介绍了如何在H5中实现长按保存图片的功能。 长按保存图片是现在一些宣传页H5中很常见的需求,但是js没有这样的能力,所以要么借助android或ios的原生能力,要么用canvas自己画一个(截...

天道酬勤Lewis
06/09
0
0
基于 H5 Canvas 的简单图形引擎 - Draw2.js

Draw2.js 一个基于 h5 canvas 实现的简单图形引擎。 Draw2.js 有什么用? Draw2.js 以现实事物来抽象。可以极大的方便你编写 h5 canvas 代码。极大的方便了开发动画。 demo 创建一个 Aplica...

日洛丶
2017/12/07
1K
0
干货分享!HTML5 动效的常见制作手法

原文出处:腾讯ISUX - 田田 众所周知,一个元素,动往往比静更吸引眼球; 一套操作界面,合适的动态交互反馈能给用户带来更好的操作体验; 一个H5运营宣传页,炫酷的动画特效定能助力传播和品...

腾讯ISUX - 田田
2015/12/08
0
0
Html网页DIV截图功能

需求及前提: (1) 将web网页展示的某些图表,导出为图片保存; (2) 图表可能是Canvas的(使用H5绘图组件生成的或者自己Draw的),也可能是div组合出来的; 方案1: 使用html2canvas(某些浏览...

ouhoo
2016/07/19
502
0

没有更多内容

加载失败,请刷新页面

加载更多

html2canvas 生成的图片变模糊解决方案

需求: 背景图片和二维码还有用户微信头像生成一张图片,可供用户下载。打开页面的时候就是一张图可以保存,html2canvas插件即可实现效果,效果是实现了,但是很郁闷,图片模糊了。。。。 为...

前端老手
12分钟前
3
0
语音翻译器在线翻译语音

对于英语不好的朋友来说,如果出国旅游,多多少少都会使用到翻译软件。通过在线翻译的方式,方便彼此的沟通交流。那么,有朋友就在问哪个英语翻译软件最准确?下面就来和大家一起分享下这个简...

401恶户
13分钟前
3
0
国内25家滤波器公司排名

国内做滤波器的企业都有哪些?哪些企业做滤波器是比较知名的?国内滤波器企业排名如何?以下是解优人才网小编给大家的分享,国内前25家做滤波器的企业详细信息。 1、武汉凡谷电子技术股份有限...

猎头悬赏平台
18分钟前
4
0
即时配送,不再只是巨头的战场

9月4日,第十届中国电子商务物流大会暨2019中国同城即时物流行业峰会于杭州召开。会上出现了蜂鸟即配、达达-京东到家、美团配送、点我达、闪送等一众即时配送行业中的知名企业的身影。 在艾媒...

喵二狸
18分钟前
3
0
Moto G 2014 LTE Root

[TOC] 下载moto专用mfastboot mfastboot-v2.zip 下载对应设备的twrp 我的是这个版本 Moto G 2014 LTE thea 刷入twrp # 1. 开启USE调试# 2. 允许OEM解锁# 3. 查看设备adb devices# 4. 进f...

yeahlife
22分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部