玩转html5(二)----用canvas结合脚本在画布上画简单的图(html5又一强大功能)
在html5中可以使用canvas标签在画布上画图,先直接上代码,这篇文章先简单介绍一下canvas的使用方法,简单画几个圆,矩形,三角形,写字。
在代码中均给出了注释,在这里特别强调的一点是:使用canvas画图时有时候必须beginPath和colsePath,但有时不需要,为了防止出现问题,可以在每次重新画一个图时重新开启路径,画完后关闭路径。
这些代码是在猎豹浏览器上实现的,有些浏览器可能不支持。
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<body>
<canvas width="500" height="500" id="canvas" style="background:yellow">
您的浏览器不支持canvas
</canvas>
<script>
//获取画布
var canvas=document.getElementById('canvas');
//alert(canvas);
//设置绘图环境
var cxt=canvas.getContext('2d');
//画一条线段
//开始新路径,第一笔可以不写
cxt.beginPath();
//设置画笔宽度
cxt.lineWidth=4;
//设置画笔颜色
cxt.strokeStyle="red";
//笔从哪开始画
cxt.moveTo(20,20);
//给出终点
cxt.lineTo(100,20);
//开始画
cxt.stroke();
//封闭路径
cxt.closePath();
//画空心圆
//开始新路径
cxt.beginPath();
//路径函数 x,y,r,角度范围,顺时针/逆时针
cxt.arc(100,100,50,0,360,false);
cxt.stroke();
cxt.closePath();
//画实心圆
cxt.beginPath();
//设置填充颜色
cxt.fillStyle="blue";
cxt.arc(100,200,50,0,360,false);
//实心
cxt.fill();
//在画个圆,不填充,加边框,可不画
cxt.stroke();
cxt.closePath();
//画矩形
//矩形函数 x,y,长宽
cxt.beginPath();
cxt.rect(200,100,50,60);
cxt.stroke();
cxt.closePath();
//其他方法
cxt.beginPath();
cxt.strokeRect(200,190,120,20);
cxt.closePath();
//实心矩形
cxt.beginPath();
cxt.rect(200,220,50,50);
cxt.fill();
cxt.closePath();
//其他方法
cxt.fillRect(200,280,50,50);
//写字
cxt.font="40px 黑体 ";
//实心字
cxt.fillText("暗伤无痕",300,50);
//空心字
//将笔触调细
cxt.lineWidth="1";
cxt.strokeText("暗伤无痕",300,100);
//将图片画到画板上 猎豹不支持
var img=new Image();
img.src="1.jpg";
cxt.drawImage(img,300,400,100,100);
//画一个三角形
cxt.beginPath();
//移动至开始点
cxt.moveTo(300,100);
cxt.lineTo(300,200);
cxt.lineTo(350,150);
cxt.closePath();//三角形需要先闭合路径再画
//空心
//cxt.stroke();
//实心
cxt.fill();
//旋转图片
//设置旋转环境
cxt.save();
//在异次元空间重置0,0点位置
cxt.translate(20,20);
//图片/x形状旋转
//设置旋转角度 参数是弧度,角度 0--360 弧度角度*Math.PI/180
//
cxt.rotate(-30*Math.PI/180);
//旋转线段
cxt.beginPath();
cxt.lineWidth=4;
cxt.moveTo(0,0);
cxt.lineTo(20,100);
cxt.stroke();
cxt.closePath();
//将旋转后的图片返回原画布
cxt.restore();
</script>
</body>
</html>
玩转html5(二)----用canvas结合脚本在画布上画简单的图(html5又一强大功能)的更多相关文章
- (转)第02节:在Canvas上画简单的图形
我们现在已经可以在HTML中使用Fabric.js库了,那这节我们就详细的学习一下如何在canvas上画出简单的图形. 在画东西之前我们需要了解画任何东西的基本三个步骤: 声明画布(canvas),用 ...
- Html5学习2(Html表格、Html列表、Html5新元素、Canvas (坐标、路径、画圆、文本、渐变、图像))
Html表格 1.表格中的表头:<th></th>.其中表头部分字体加粗,颜色深绿色 <h4>水平标题:</h4> <table border=& ...
- HTML5学习(四)---Canvas绘图
参考教程地址:http://www.w3school.com.cn/html5/html_5_canvas.asp canvas 元素用于在网页上绘制图形. 什么是 Canvas? HTML5 的 c ...
- HTML5新标签<canvas>
基本用法 首先在body中写个<canvas>,设定大小,个人建议大小要在行内设置,不然在部分情况下会发生错误. CSS部分 给canvas加个边框,这边框只是为了方便看出canvas的边 ...
- 利用Jquery使用HTML5的FormData属性实现对文件的上传
1.利用Jquery使用HTML5的FormData属性实现对文件的上传 在HTML5以前我们如果需要实现文件上传服务器等功能的时候,有时候我们不得不依赖于FLASH去实现,而在HTML5到来之后,我 ...
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
- HTML5学习总结——canvas绘制象棋(canvas绘图)
一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...
- HTML5中的 Canvas
什么是Canvas? Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像.Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度.JavaScript代码可以访问该地区,通过 ...
- 【javascript】谈谈HTML5: Web-Worker、canvas、indexedDB、拖拽事件
前言:作为一名Web开发者,可能你并没有对这个“H5”这个字眼投入太多的关注,但实际上它早已不知不觉进入到你的开发中,并且总有一天会让你不得不正视它,了解它并运用它 打个比方:<海贼王> ...
随机推荐
- KMP算法的Next数组详解(转)
转载请注明来源,并包含相关链接. 网上有很多讲解KMP算法的博客,我就不浪费时间再写一份了.直接推荐一个当初我入门时看的博客吧: http://www.cnblogs.com/yjiyjige/p/3 ...
- loj1201(最大独立集)
传送门:A Perfect Murder 题意:有一群苍蝇,之间有一些是朋友关系,如果杀了一只苍蝇,那么它的朋友们都会有警惕性,再也杀不了这些朋友了,问最多能杀多少只苍蝇. 分析:根据朋友性连边,最多 ...
- TBDR缺点
TBDR全称Tile-based Deferred Rendering.它是Power VR独特的TBR技术的一种延伸实现手段.TBR/TBDR通过将每一帧画面划分成多个矩形区域,并对区域内的全部像素 ...
- 敏捷开发-Scrum 真实
近期研究前 Scrum 数据编译的文件,在接下来的团队和项目开发.项目根据该引入 Scrum 一些练习,提高团队成员和项目之间的交付质量的合作. 参考资料: <轻松Scrum之旅-敏捷开发故事& ...
- js快速分享代码
这是一款简单易用的文章分享工具,您只需将下面的html代码拷贝到模板中就可以实现文章快速分享功能.如果您想分享你的博客.个人网站或者企业网站等等,下面是两款不错的分享工具,值得拥有! 1. <d ...
- windows server 搭建radius服务器
使用ISA 2004搭建PPTP/L2TP 服务器后,VPN账号是在radius服务器上的,使用window server 2003搭建radius服务器,需要添加组件->internet验证服 ...
- C# 使用Tuple传递多个参数
Tuple是基于.NET Framework 4.0 及以上版本才有的.微软称它为元组,如果有三个参数那就是三元组.如 Tuple(T1, T2, T3) Tuple的命名空间在 System 很短吧 ...
- iScreenLocker 3.1.8 安卓锁屏通知--苹果一样的体验
*软件介绍: 苹果锁屏通知(iScreenLocker)是一款android上ios风格的锁屏软件.它颠覆安智通知设计,将原来状态栏的通知搬到锁屏界面上来,能够在桌面轻松收发短信,微博,微信等消息.它 ...
- Java 二次MD5 32位小写加密算法与php页面加密结果相同
最近做的一个项目需要使用MD5加密算法,需要加密的参数有两个.自己先试了几次,算的结果为php页面的不一样,后来与写php页面的同事沟通后,了解到php页面的算法如下: action = " ...
- Javascript Base64编码与解码
原文:[转]Javascript Base64编码与解码 <html> <head> <META HTTP-EQUIV="MSThemeCompatible&q ...