html5 直线的两头弯曲,html5教程（二）（canvas绘制简单的直线）

Html5_convas

var elem = document.getElementById("myConvas");

if (elem && elem.getContext) {

var myContext = elem.getContext("2d");

通过 fillStyle和 strokeStyle 属性可以轻松的设置矩形的填充和线条。

颜色值使用方法和 CSS 一样：十六进制数、rgb()、rgba() 和 hsla。

通过 fillRect可以绘制带填充的矩形。使用 strokeRect 可以绘制只有边框没有填充的矩形。

如果想清除部分 canvas 可以使用 clearRect。上述三个方法的参数相同：x, y, width, height。

前两个参数设定 (x,y) 坐标，后两个参数设置矩形的高度和宽度。可以使用 lineWidth属性改变线条粗细

myContext.fillStyle = "#000FFF";

myContext.strokeStyle = "#FF00F0";

通过 canvas 路径(path)可以绘制任意形状。可以先绘制轮廓，然后绘制边框和填充。

创建自定义形状很简单，使用 beginPath()开始绘制，然后使用直线、曲线和其他图形绘制你的图形。

绘制完毕后调用 fill 和 stroke 即可添加填充或者设置边框。调用 closePath() 结束自定义图形绘制

myContext.beginPath();

myContext.moveTo(10,10);

//定义第一条直线的终点坐标，也即为第二条直线的起点坐标

myContext.lineTo(60,90);

myContext.lineTo(10,150);

myContext.lineTo(10,10);

//画圆

//myContext.arc(90,89,45,50,Math.PI*2,true);

//用fillStyle定义的颜色填充

myContext.fill();

myContext.stroke();

myContext.closePath();

}

html5 直线的两头弯曲,html5教程（二）（canvas绘制简单的直线）相关推荐

java canvas 画图片_[Java教程][HTML5] Canvas绘制简单图片
[Java教程][HTML5] Canvas绘制简单图片 0 2016-05-13 13:00:04 获取Image对象,new出来定义Image对象的src属性,参数:图片路径定义Image对象 ...
html5 简单图片效果,【HTML5】Canvas绘制简单图片教程，
[HTML5]Canvas绘制简单图片教程, 获取Image对象,new出来定义Image对象的src属性,参数:图片路径定义Image对象的onload方法,调用context对象的drawIm ...
openlayers地图旋转_OpenLayers教程二：实现简单的地图显示
本文衔接上一篇文章:不睡觉的怪叔叔:OpenLayers教程二:实现简单的地图显示zhuanlan.zhihu.com 经过上一篇文章对OpenLayers的简单了解以后,现在让我们来实现一个简单的 ...
使用html5 canvas绘制简单图形小作品~灰太狼
<!-- 作者:1457225624@qq.com 时间:xxxx-xx-xx 描述:大家好!我是小张,今天我用html5,,canvas的画布画出了一个小作品, 画的不好看,,,还请原谅,,下 ...
二维图画法入门_二维绘制简单图形CAD教程（1）
二维绘图是CAD的基本功能,是三维建模的基础,针对CAD初学者,本文用一些CAD简单实例来介绍CAD二维图形的画法: 绘图实例如下: 第1步:画直径26然圆,然后再用圆命令,通过追踪功能向右追踪(启动 ...
【Python】全网最新最全Pyecharts可视化教程(二)：绘制好看的交互式地图教程
说到使用Python来进行地图的可视化那就一定少不了Pyecharts的身影,本文小编就对Pyecharts可实现的地图可视化进行一番探究,看看其出来的效果如何 1 Pyecharts-Map 首先要 ...
h5的横线_使用HTML5 Canvas绘制直线或折线等线条的方法讲解
HTML5 Canvas基本概念讲解html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏 ...
html5 canvas绘制图形,html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
在html利用canvas蚂蚁,html5 利用canvas实现简单的人物走动
最近在学习html5,其中涉及到很关键的元素canvas-画布,在网上下载了一些游戏源代码,虽然能看懂,但是想单独地针对某个功能提取出来还是有难处的,于是乎自己又上网查找了一些例子,才将超级玛丽简单的 ...

html5 直线的两头弯曲,html5教程（二）（canvas绘制简单的直线）

html5 直线的两头弯曲,html5教程（二）（canvas绘制简单的直线）相关推荐

最新文章

热门文章

html5 直线的两头弯曲,html5教程 （二）（canvas绘制简单的直线）

html5 直线的两头弯曲,html5教程 （二）（canvas绘制简单的直线）相关推荐

最新文章

热门文章

html5 直线的两头弯曲,html5教程（二）（canvas绘制简单的直线）

html5 直线的两头弯曲,html5教程（二）（canvas绘制简单的直线）相关推荐