Html5新特性用canvas标签画多条直线附效果截图


Posted in HTML / CSS onJune 30, 2014

下面例子为用canvas标签画多条直线

复制代码
代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index_three</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/index.js"/></script>
<body >
<!-- 添加canvas标签,并加上红色边框以便于在页面上查看 -->
<canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
您的浏览器不支持canvas标签。
</canvas>
<script type="text/javascript">
//获取Canvas对象(画布)
var canvas = document.getElementById("myCanvas");
//简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误
if(canvas.getContext){
//获取对应的CanvasRenderingContext2D对象(画笔)
var ctx = canvas.getContext("2d");
//线条的颜色
ctx.strokeStyle="#FF9933";
//线条的宽度像素
ctx.lineWidth=10;
//线条的两关形状
ctx.lineCap="round";
//注意,Canvas的坐标系是:Canvas画布的左上角为原点(0,0),向右为横坐标,向下为纵坐标,单位是像素(px)。
//开始一个新的绘制路径
ctx.beginPath();
//定义直线的起点坐标为(10,10)
ctx.moveTo(50, 50);
//定义直线的终点坐标为(50,10)
ctx.lineTo(350, 250);
ctx.moveTo(50, 240);
ctx.lineTo(360, 60);
ctx.moveTo(50, 200);
ctx.lineTo(300, 40);
//沿着坐标点顺序的路径绘制直线
ctx.stroke();
//关闭当前的绘制路径
ctx.closePath();
}
</script>
</body>
</html>

Html5新特性用canvas标签画多条直线附效果截图
HTML / CSS 相关文章推荐
利用CSS3实现自定义滚动条代码分享
Aug 18 HTML / CSS
介绍CSS3使用技巧5个
Apr 02 HTML / CSS
利用CSS3的transform做的动态时钟效果
Sep 21 HTML / CSS
css3中background新增的4个新的相关属性用法介绍
Sep 26 HTML / CSS
css3教程之倾斜页面
Jan 27 HTML / CSS
实例教程 纯CSS3打造非常炫的加载动画效果
Nov 05 HTML / CSS
css3选择器基本介绍
Dec 15 HTML / CSS
用CSS3的box-reflect来制作倒影效果
Nov 15 HTML / CSS
使用HTML5的表单验证的简单示例
Sep 09 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
Mar 25 HTML / CSS
canvas绘制图片drawImage使用方法
Sep 15 HTML / CSS
HTML页面中使两个div并排显示的实现
May 15 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
Jun 23 #HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
Jun 23 #HTML / CSS
HTML5 在canvas中绘制矩形附效果图
Jun 23 #HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
Jun 23 #HTML / CSS
HTML5 在canvas中绘制文本附效果图
Jun 23 #HTML / CSS
HTML5使用drawImage()方法绘制图像
Jun 23 #HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 #HTML / CSS
You might like
php实现读取内存顺序号
2015/03/29 PHP
php实现向javascript传递数组的方法
2015/07/27 PHP
php简单计算年龄的方法(周岁与虚岁)
2016/12/06 PHP
php函数式编程简单示例
2019/08/08 PHP
将jQuery应用于login页面的问题及解决
2009/10/17 Javascript
Javascript Cookie读写删除操作的函数
2010/03/02 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
2014/05/27 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
2018/05/12 Javascript
js中对象与对象创建方法的各种方法
2019/02/27 Javascript
node之本地服务器图片上传的方法示例
2019/03/26 Javascript
layui prompt 设置允许空白提交的方法
2019/09/24 Javascript
[53:43]VP vs NewBee Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
python 域名分析工具实现代码
2009/07/15 Python
centos下更新Python版本的步骤
2013/02/12 Python
Linux CentOS7下安装python3 的方法
2018/01/21 Python
详谈python在windows中的文件路径问题
2018/04/28 Python
Python多线程原理与用法实例剖析
2019/01/22 Python
django 自定义过滤器的实现
2019/02/26 Python
python动态文本进度条的实例代码
2020/01/22 Python
PyCharm如何导入python项目的方法
2020/02/06 Python
解决pycharm编辑区显示yaml文件层级结构遇中文乱码问题
2020/04/27 Python
CSS3 选择器 基本选择器介绍
2012/01/21 HTML / CSS
CSS3 RGBA色彩模式使用实例讲解
2016/04/26 HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
欧缇丽美国官网:Caudalie美国
2016/12/31 全球购物
蔻驰法国官网:COACH法国
2018/11/14 全球购物
音乐学个人的自荐书范文
2013/11/26 职场文书
浙江文明网签名寄语
2014/01/18 职场文书
学习雷锋标语
2014/06/25 职场文书
纺织工程专业推荐信
2014/09/08 职场文书
2014年健康教育工作总结
2014/11/20 职场文书
Nginx域名转发https访问的实现
2021/03/31 Servers
学会用Python实现滑雪小游戏,再也不用去北海道啦
2021/05/20 Python
小程序实现文字循环滚动动画
2021/06/14 Javascript
vue使用echarts实现折线图
2022/03/21 Vue.js