h5 canvas 画图
h5 canvas 画图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">
$().ready(function () {
var $c=$("#cans");
$c.bind('mousemove', function (event) {
var x=event.clientX;
var y=event.clientY;
$("#res").text("坐标：x轴"+x+"坐标：y轴"+y);
});
// 画矩形
var d=$c.get(0).getContext("2d"); //2d
d.fillStyle="red"; //颜色
d.fillRect(0,0,100,100); // 矩形
d.fillStyle="rgba(0,0,255,0.5)"; //最后一个是程春明度
d.fillRect(200,0,100,100);
// 画线
d.moveTo(110,110); //起始位置
d.lineTo(130,130); //终止位置
d.lineTo(155,120); // 如果没有再次设置起始位置则从终止位置继续画
d.stroke(); // 结束图形
// 圆
d.fillStyle="blue";
d.beginPath(); // 从新开始画，防止 冲突重叠
d.arc(100,200,30,0,Math.PI*2,true); // x y 坐标 半径30
d.closePath(); // 结束画布，防止冲突重叠
d.fill(); // 结束渲染
// 颜色渐变
var grd= d.createLinearGradient(250,250,375,250); // 颜色渐变的起始和终止坐标
grd.addColorStop(0,'red'); // 0 表示起点 0.1 0.2.。。1 表示终点
grd.addColorStop(0.8,'green');
grd.addColorStop(1,'blue'); d.fillStyle=grd;
d.fillRect(250,250,375,250); // 设置色块
// 载入图形
var img=new Image()
img.src="../img/logo.png"
//等图像 加载完毕，再绘制图像
img.onload= function () {
//d.drawImage(img,200,30); // 加载图片
// 背景图片平铺
var pattern = d.createPattern(img, "repeat");
//2、将返回值设置给fillStyle属性
d.fillStyle = pattern;
//3、填充矩形
d.fillRect(0, 0, 400, 300);
}
//切割图像
d.beginPath();
d.arc(150,150,50,0,Math.PI * 2 , true);
d.closePath();
d.clip();
}); </script> </head> <body> <canvas id="cans" width="500" height="500">浏览器不支持canvas</canvas> <div id="res"></div> </body> </html>
h5画图 补充
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>day04 pm 完</title>
<style> </style>
<script src="js/jquery.min.js"></script>
<script>
$().ready(function () {
var can=$("#canvas").get(0); //转成 dom 操作
d=can.getContext("2d");
d.fillStyle="red"; //填充颜色
d.strokeStyle='green'; // 线条颜色
d.strokeRect(50,50,100,100); //边框矩形
d.fillRect(60,60,80,80); // 实心矩形
d.clearRect(70,70,60,60); //擦除矩形 // 封闭的三角形
d.beginPath(); // 添加 beginPath() closePath() 就可以形成封闭图形
d.moveTo(110,110); //起始位置
d.lineTo(130,130); //终止位置
d.lineTo(155,120); // 如果没有再次设置起始位置则从终止位置继续画 d.closePath();
d.fillStyle="blue";
d.stroke(); // 结束图形
d.fill();
// 左半圆
d.fillStyle="green";
d.beginPath(); // 从新开始画，防止 冲突重叠
d.arc(100,200,30,Math.PI/2,Math.PI*3/2,false);
// x y 坐标 半径30 位置 上 PI*3/2 右 0 / 2PI 下 pi/2 左 pi true false表示顺时针或逆时针
d.closePath(); // 结束画布，防止冲突重叠
d.fill(); // 结束渲染
//任意矩形
$("#btn").click(function () {
var x=parseInt(Math.random()*500);
var y=parseInt(Math.random()*400);
d.fillRect(x,y,100,100);
});
// 缩放
$("#btnScale").click(function () {
d.scale(1.2,1.2); //放大1.2倍 要再画矩形才有效果
// d.translate(100,100);
// d.save(); // 保存扩大缩小等的状态
// d.restore(); // 恢复状态
});
}); </script>
</head>
<body>
<canvas id="canvas" width="800" height="500" style="border:1px solid green;">
不支持 canvas
</canvas>
<br>
<button type="button" id="btn">button</button>
<button type="button" id="btnScale">btnScale</button>
</body>
</html>
html5绘制文字
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.js"></script>
<script>
$(function () {
var canvas = $("#canvas").get(0);
var d = canvas.getContext("2d");
d.lineWidth=1;
d.strokeStyle='green';
d.font = "bold 24px 微软雅黑";
d.strokeText("你好,世界!",20,20); //空心文字轮廓
d.fillText("你好,世界!",125,125); // 文字
//阴影文字 d.shadowColor="red"; //阴影
d.shadowOffsetX=5; // 偏移
d.shadowOffsetY=5; //
d.shadowBlur=5; // 阴影模糊效果
d.font = "bold 24px 微软雅黑";
d.fillText("微软雅黑!",35,50);
});
</script>
</head>
<body>
<canvas id="canvas" width="800" height="300"></canvas>
</body>
</html>
html5 线条粗细 张条线冒
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.js"></script>
<script>
$(function () {
var canvas=$("#canvas").get(0);
var d=canvas.getContext("2d");
//线条粗细 lineWidth:1
// 线条线冒： lineCap:butt round square
d.lineWidth=6; // 线条粗细
d.lineCap='round'; //头尾圆角
//d.lineJoin='round'; // 线条连接处圆角
d.lineJoin='miter'; // 两条线形成的锐角长度，默认为10
d.miterLimit=8;
d.strokeStyle='green';
d.moveTo(110,110); //起始位置
d.lineTo(150,150); //终止位置
d.lineTo(125,100); // 如果没有再次设置起始位置则从终止位置继续画
d.stroke(); // 结束图形
});
</script>
</head>
<body>
<canvas id="canvas" ></canvas>
</body>
</html>
h5 canvas 画图的更多相关文章
- ## H5 canvas画图白板踩坑
最近接手了一个小型的H5,最主要的功能大概就是拍照上传和canvas画板了. 主要是记录一下自己菜到像傻子一样的技术. 1.canvas画板隔空打牛!画布越往上部分错位距离越小,越往下距离越大. 2. ...
- HTML5 Canvas 画图入门
HTML5 Canvas 画图入门 HTML5 Canvas 画图入门,仅供学习參考 <!DOCTYPE html> <html> <head> <meta ...
- html5之canvas画图基础
HTML5+CSS3的好处是,你可以编写一个页面分别用于不同的平台,只需要设置不同的css样式就可以了,现在基本主流浏览器都支持全新的HTML5和CSS3,因为它的跨平台开发.因为是原生代码所以它的页 ...
- Canvas画图在360浏览器中跑偏的问题
问题描述,canvas画图的js代码中编写的是画正方形的代码,结果在360浏览器上变成了长方形,不知道怎么回事,请问各位大神是否遇到过此类问题? <!DOCTYPE html> <h ...
- H5 canvas绘制出现模糊的问题
在之前做移动端小游戏幸运转盘.九宫格转盘,使用到了 canvas ,也是第一次在项目中使用 canvas 来实现. 近期测试人员反应 canvas 绘制的内容太模糊,心想着用 canvas 绘制出来的 ...
- h5 canvas 小球移动
h5 canvas 小球移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- html5 Canvas画图3：1px线条模糊问题
点击查看原文地址: html5 Canvas画图3:1px线条模糊问题 本文属于<html5 Canvas画图系列教程> 接上一篇canvas画线条教程 上次我们讲到,canvas有时候会 ...
- 使用 canvas 画图时图像文字模糊的解决办法
最近在使用 canvas 画图的时候,遇到了图像文字模糊的问题,解决思路就是根据分辨率创建不同尺寸的画布.以下是创建高分辨率画布的代码: /** * 创建高分辨率画布 * @param w 画布宽 * ...
- H5中画图标签Canvas---画矩形，画线，画圆，渐变色，图形载入
一: 1.鼠标监视坐标值 <!DOCTYPE html> <head> <meta charset=UTF-8> <title>canvas的演示< ...
随机推荐
- dos 下 查看和设置classpath的命令
dos 下 查看和设置classpath的命令查看:echo %classpath%设置:set classpath=%classpath%path 其中%classpath%代表以前的值,pa ...
- GTP V0 和 GTP V1
GTP概述 GTP(GPRS Tunnelling Protocol)协议应用在SGSN 和GGSN 之间,为各个移动台(MS) 建立GTP 通道,GTP 通道是 GPRS服务节点(GSN) 之间的安 ...
- DEDECMS网站数据备份还原教程
备份织梦网站数据 dedecms备份教程 进入DedeCms后台 -> 系统 -> 数据库备份/还原 备份文件在\data\backupdata 下载数据库备份资料\data\backup ...
- 最近打算体验一下discuz，有不错的结构化数据插件
提交sitemap是每位站长必做的事情,但是提交到哪里,能不能提交又是另外一回事.国内的话百度是大伙都会盯的蛋糕,BD站长工具也会去注册的,可有些账号sitemap模块一直不能用,或许是等级不够,就像 ...
- Buy Tickets（线段树）
Buy Tickets Time Limit:4000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Submit ...
- 第12章 使用Samba或NFS实现文件共享
章节简述: 本章节为读者讲述文件共享系统的作用,了解Samba与NFS服务程序的开发背景以及用法. 详细逐条讲解Samba服务配置参数,演示安全共享文件的配置策方法,并使用autofs服务程序自动挂载 ...
- 使用nginx lua实现网站统计中的数据收集
导读网站数据统计分析工具是各网站站长和运营人员经常使用的一种工具,常用的有 谷歌分析.百度统计和腾讯分析等等.所有这些统计分析工具的第一步都是网站访问数据的收集.目前主流的数据收集方式基本都是基于ja ...
- C++中的vector使用范例
原文链接 http://blog.csdn.net/tjh666/article/details/1604119 1.vector 的数据的存入和输出: #include<stdio.h> ...
- HDOJ 1102 生成树
Constructing Roads Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...
- iOS7总显示状态栏的解决方法
转载http://blog.csdn.net/langresser_king/article/details/18351021 2014年2月份开始,苹果需求开发者必须使用xcode5开发游戏和应用, ...