有趣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另一个强大)的更多相关文章
- 把图片画到画布上,适应PC和移动端
画一张图片到画布上 <canvas id="myCanvas" width="1000px" height="200px" >您 ...
- Android开发经验之获取画在画布上的字符串长度、宽度(所占像素宽度)
Android中获取字符串长度.宽度(所占像素宽度) 计算出当前绘制出来的字符串有多宽,可以这么来! 方法1: Paint paint = new Paint(); Rect rect = new R ...
- 使用canvas 根据角度画圆弧
最近收到一个需求,根据角度在平面上画出对应的区域,实际就是 以固定的原点,根据起始角度和结束角度和半径,画出他的区域. 写了一小段,试试 export class Draw { construct ...
- 解决 canvas 下载含图片的画布时的报错
Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may no ...
- 玩转html5(二)----用canvas结合脚本在画布上画简单的图(html5又一强大功能)
在html5中可以使用canvas标签在画布上画图,先直接上代码,这篇文章先简单介绍一下canvas的使用方法,简单画几个圆,矩形,三角形,写字. 在代码中均给出了注释,在这里特别强调的一点是:使用c ...
- HTML5中的 Canvas
什么是Canvas? Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像.Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度.JavaScript代码可以访问该地区,通过 ...
- HTML5学习(四)---Canvas绘图
参考教程地址:http://www.w3school.com.cn/html5/html_5_canvas.asp canvas 元素用于在网页上绘制图形. 什么是 Canvas? HTML5 的 c ...
- Canvas中如何画一条清晰的线宽为奇数(如1px逻辑像素)的线?
我在开发中使用canvas的机会不是很多,但是第一次实际使用中就遇到了问题,"很久很久以前,我自己画了一个雷达图,线宽都是1像素,但是显示效果不如期望,这才发现canvas中的画线还是有坑的 ...
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
随机推荐
- error C2504: “CActiveXDocControl”: 基类没有定义
这样的错误,通常,第一个文件失败: 1.相互头包括 2.头文件秩序 此错误是编译错误,和"inclued头文件"有关 问题描写叙述 有三个头文件AgentSDK.h.AA.h.BB ...
- ios01
http://code4app.com/ 0.全部Swift http://numbbbbb.gitbooks.io/-the-swift-programming-language-/content/ ...
- C# Windows Phone 8 WP8 高级开发,制作不循环 Pivot ,图片(Gallery)导览不求人! 内附图文教学!!
原文:C# Windows Phone 8 WP8 高级开发,制作不循环 Pivot ,图片(Gallery)导览不求人! 内附图文教学!! 一般我们在开发Winodws Phone APP 的时候往 ...
- python正文(两)
在本文中,我读了记录和总结<Python标准库>一本书,本节课文的学习和理解. 事实上,在Python于,使用一些方法这段文字是一回事,尤其是经常使用.在一般情况下,会用String这样的 ...
- javascript实现倒计时-------Day28
先来两张图片,看一看今天写什么: 看到图片右上角是什么了么看到图片以下是什么了么 相信这个大家都不会陌生吧.那些生活中等着秒杀,等着抢小米人们,焦躁等待的你曾一秒一秒的盯着它看么,我不知道答案,可我知 ...
- GUIForDebug
package gui; import org.luaj.vm2.Globals; import org.luaj.vm2.LuaValue; import org.luaj.vm2.ast.Chun ...
- JDBC batch批量Statement executeBatch 详细解释
JDBC提供了数据库batch处理的能力,在数据大批量操作(新增.删除等)的情况下能够大幅度提升系统的性能.我曾经接触的一个项目,在没有採用batch处理时,删除5万条数据大概要半个小时左右,后来对系 ...
- Directx11学习笔记【十三】 实现一个简单地形
本文由zhangbaochong原创,转载请注明出处http://www.cnblogs.com/zhangbaochong/p/5510294.html 上一个教程我们实现了渲染一个会旋转的立方体, ...
- .net Quartz 服务 作业调度
.net项目中使用Quartz (1)在web.config中进行相关配置 <configSections> <section name="quartz" t ...
- (转)maven设置内存
Windows环境中 找到文件%M2_HOME%\bin\mvn.bat ,这就是启动Maven的脚本文件,在该文件中你能看到有一行注释为: @REM set MAVEN_OPTS=-Xdebug - ...