HTML画4个矩形,html5--5-4 绘制矩形

html5--5-4 绘制矩形

学习要点

掌握绘制矩形的方法：strkeRect()/fillRect()

掌握绘制路径的 beginPath()和closePath()

矩形的绘制方法

rect(x,y,w,h)创建一个矩形

strokeRect(x,y,w,hx,y,w,h) 绘制矩形(无填充)

fillRect(x,y,w,h) 绘制"被填充"的矩形

stroke() 绘制已定义的路径

Canvas的路径方法

moveTo() 定义绘制路径的起点(在直线中就是定义直线的起点)

lineTo() 添加一个新点，(在我们的直线案例中就是定义直线的终点，但是后边继续绘制的话，它就变成中间点)

stroke() 绘制已定义的路径

beginPath() 用来创建新的路径

closePath() 从当前点回到起始点的来封闭路径

绘制直线段流程:

在HTML5文档中添加canvas元素，并且设置的宽高和ID

在canvas元素中添加提示语句，让不支持canvas的浏览器能够显示友好的提示语句

添加script元素

获取画布/设置绘图绘图环境：此为固定语句，暂时记住、了解即可，后续课程还会继续讲解

指定线宽:lineWidth= 数值

指定颜色：strokeStyle=颜色值(只适用用轮廓，线段等，填充色用：fillStyle=颜色值

设定起点：moveTo(x坐标,y坐标)

设定终点：lineTo(x坐标,y坐标)

开始绘制：stroke()

绘制矩形流程：

在HTML5文档中添加canvas元素，并且设置的宽高和ID

在canvas元素中添加提示语句，让不支持canvas的浏览器能够显示友好的提示语句

添加script元素

获取画布/设置绘图绘图环境：此为固定语句，暂时记住、了解即可，后续课程还会继续讲解绘制空心矩形指定线宽:lineWidth= 数值

指定轮廓颜色：strokeStyle=颜色值(只适用用轮廓，线段等，填充色用：fillStyle=颜色值

设定矩形的基本参数：strokeRect(x,y;width,height)

绘制填充矩形

指定填充颜色：fillStyle=颜色值(只适用用轮廓，线段等，填充色用：fillStyle=颜色值

设定矩形的基本参数：fillRect(x,y;width,height)

实例

无标题文档Document

canvas{background: #A9A9A0}

您的浏览器暂不支持HTML5的canvas元素！！

//定义变量获取画布DOM

var canvas=document.getElementById("mycanvas");

//设置绘画环境为2d

var context=canvas.getContext("2d");

//设置线宽

context.lineWidth=10;

//设置颜色

context.strokeStyle="#FF0000";

//用moveto设置起点

context.moveTo(10,10);

//用lineTo设置终点

context.lineTo(100,100);

context.lineTo(100,200);

context.lineTo(200,200);

context.lineTo(300,100);

context.lineTo(10,10);

//开始画线

context.stroke();

context.beginPath();

context.lineWidth=5;

context.strokeStyle="#FFFF00";

context.rect(350,50,100,50);

context.stroke();

[HTML5 Canvas学习]绘制矩形

1.使用strokeRect和fillRect方法绘制矩形 a.strokeRect是绘制一个不填充的矩形 b.fillRect是绘制一个填充的矩形 代码:

HTML5 在canvas绘制一个矩形

笔者:本笃庆军 原文地址:http://blog.youkuaiyun.com/qingdujun/article/details/32930501 一.绘制矩形 canvas使用原点(0,0)在左上角的坐标系统 ...

html5 canvas绘制矩形和圆形

...

Html5 实现灯笼绘制

最近在学习Html5,就用JavaScript在Canvas试着绘制了一个灯笼,并作了简要的说明. 具体绘制思路在页面上有说明,不再赘述,代码如下:

什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

opencv2 使用鼠标绘制矩形并截取和保存矩形区域图像

前言 好长时间没写博文了,今天偷偷懒写篇关于opencv2中鼠标响应操作的文章. 鼠标操作属于用户接口设计,以前一直使用Qt来做,但是如果只需要简单的鼠标,键盘操作,直接调用opencv库的函数也未尝 ...

随机推荐

httpclient4 文档翻译

前言超文本传输协议(HTTP)也许是当今互联网上使用的最重要的协议了.Web服务,有网络功能的设备和网络计算的发展,都持续扩展了HTTP协议的角色,超越了用户使用的Web浏览器范畴,同时,也增加了需要 ...

[转]使用 C 编写 Lua 模块

Lua 作为一种小巧的语言,一般都是嵌入到 C/C++ 中作为扩展语言,但是也可以作为独立的脚本语言使用,并且可以使用 C/C++ 编写扩展模块.在参考资料 [1] 中有怎样用 C/C++ 编写模块的 ...

aspcms常见问题解决方案

1.产品详细页读取多张产品图片(栏目类型:产品){aspcms:cimages count=16 contentid=[content:id]}