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

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

复制代码代码如下:

index_three

您的浏览器不支持canvas标签。

//获取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();

}

html5两条直线,Html5新特性用canvas标签画多条直线附效果截图相关推荐

html5 strongeaseinout,HTML5新特性之canvas标签（Day1-4）(示例代码)
canvas 1.什么是canvas? 1.1 是HTML5提供的一种新标签 1.2 canvas是一个矩形区域的画布,可以用JavaScript在上面绘画.控制其每一个像素 1.3 canvas 拥 ...
开发者值得关注的HTML5新特性：Canvas
随着IE 10的即将发布正式版,标志者HTML5的时代已经越来离我们越来越近了,尽管HTML 5的最终标准草案还没最终敲定,但象Chrome,Firefox等浏览器对HTML5的标准已经支持的十分完善 ...
（九）HTML5+CSS3新特性：语义标签、多媒体标签、表单、新增选择器、盒子模型、模糊、calc函数、过渡
本文仅用作学习记录,学习视频为B站的pink老师文章目录 HTML5的新特性 HTML5新增的语义化标签 HTML5新增的多媒体标签 HTML5新增的input表单 HTML5新增的表单属性 CSS ...
C#8.0的两个有趣的新特性以及gRPC
最近每天忙着跑很多地方,回家就不想动了,没什么心情写东西.今天有空,稍微写一点. 下文中: 关于C#语法特性的部分需要Visual Studio 2019支持. 关于.NET Core的部分需要安装. ...
c# 路径下的最近文件夹_C#8.0的两个有趣的新特性以及gRPC
最近每天忙着跑很多地方,回家就不想动了,没什么心情写东西.今天有空,稍微写一点. 下文中: 关于C#语法特性的部分需要Visual Studio 2019支持. 关于.NET Core的部分需要安装. ...
H5新特性：canvas学习1
1.canvas介绍 <canvas>是HTML5中新增的元素,通过标签可以在页面中生成一个块画布,在这块画布上可以使用Javascript来绘制图形或者实现图形动画. canvas标签只 ...
根据多个点使用canvas贝赛尔曲线画一条平滑的曲线
众所周知想用canvas画一条曲线我们可以使用这些函数: 二次曲线:quadraticCurveTo(cp1x, cp1y, x, y) 贝塞尔曲线:bezierCurveTo(cp1x, cp1y, ...
web前端基础 html5+css3（十.html5css3新特性）
1.html5新增的语义化标签(针对搜索引擎,提高优化) <header>:头部标签 <nav>:导航标签 <active>:内容标签 <section> ...
HTML5有哪些表单新特性
21. 检测属性支持除了Modernizr之外我们还可以通过javascript简单地检测一些属性是否支持,如: 22. Mark元素把元素看做是高亮的作用,当我选择一段文字的时候,javascr ...

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

html5两条直线,Html5新特性用canvas标签画多条直线附效果截图相关推荐

最新文章

热门文章