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 media queries + jQuery实现响应式导航
Sep 30 HTML / CSS
CSS3制作ajax loader icon实现思路及代码
Aug 25 HTML / CSS
CSS3 边框效果
Nov 04 HTML / CSS
详解移动端HTML5音频与视频问题及解决方案
Aug 22 HTML / CSS
HTML5是否真的可以取代Flash
Feb 10 HTML / CSS
开发人员所需要知道的HTML5性能分析面面观
Jul 05 HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
Jun 09 HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
May 12 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
Feb 06 HTML / CSS
HTML5打开手机扫码功能及优缺点
Nov 27 HTML / CSS
canvas如何绘制钟表的方法
Dec 13 HTML / CSS
canvas实现图片镜像翻转的2种方式
Jul 22 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 阴历-农历-转换类代码
2012/01/16 PHP
php实现window平台的checkdnsrr函数
2015/05/27 PHP
php 类中的常量、静态属性、非静态属性的区别
2017/04/09 PHP
js静态作用域的功能。
2006/12/25 Javascript
js正确获取元素样式详解
2009/08/07 Javascript
Javascript学习笔记二 之 变量
2010/12/15 Javascript
jQuery中创建实例与原型继承揭秘
2011/12/21 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
JS实现黑客帝国文字下落效果
2015/09/01 Javascript
学习JavaScript设计模式之迭代器模式
2016/01/19 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
2016/02/06 Javascript
BootStrap文件上传样式超好看【持续更新】
2016/05/10 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
2018/04/18 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
2019/09/20 Javascript
[55:42]VG vs VGJ.T 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python返回真假值(True or False)小技巧
2015/04/10 Python
用Python生成器实现微线程编程的教程
2015/04/13 Python
在python2.7中用numpy.reshape 对图像进行切割的方法
2018/12/05 Python
python 使用正则表达式按照多个空格分割字符的实例
2018/12/20 Python
对python xlrd读取datetime类型数据的方法详解
2018/12/26 Python
python实现画五角星和螺旋线的示例
2019/01/20 Python
用python实现名片管理系统
2020/06/18 Python
python中tab键是什么意思
2020/06/18 Python
Python 解析简单的XML数据
2020/07/24 Python
django下创建多个app并设置urls方法
2020/08/02 Python
Python如何测试stdout输出
2020/08/10 Python
CSS图片翻转动画技术详解(IE也实现了)
2014/04/03 HTML / CSS
Sneaker Studio法国:购买运动鞋
2018/06/08 全球购物
navabi英国:设计师大码女装
2019/06/25 全球购物
英国最大的笔记本电脑直销专家:Laptops Direct
2019/07/20 全球购物
编写用C语言实现的求n阶阶乘问题的递归算法
2014/10/21 面试题
高中自我鉴定范文
2013/11/03 职场文书
公证书标准格式
2014/04/10 职场文书
小型婚礼主持词
2015/06/30 职场文书
java解析XML详解
2021/07/09 Java/Android
VW、VH适配移动端的解决方案与常见问题
2023/05/21 HTML / CSS