html5的画布canvas——画出简单的矩形、三角形实例代码

2016-02-19 10:35 116 1 收藏

今天图老师小编给大家精心推荐个html5的画布canvas——画出简单的矩形、三角形实例代码教程，一起来看看过程究竟如何进行吧！喜欢还请点个赞哦~

【 tulaoshi.com - Web开发】

首先在html页面中放置一个canvas元素，其中canvas元素应该具备三个属性ID、width、height。

代码如下：

canvas id="demo" width="600" height="600"/canvas

取得canvas对象并取得上下文var cxt=document.getElementById('demo').getContext("2d");其中参数2d是确定的。

开始绘制，有两种形式，一种是描边（fill），一种是填充（stroke）。

javascript代码：

代码如下：

script language="javascript"
var cxt=document.getElementById('demo').getContext("2d");
cxt.beginPath();
cxt.fillStyle="#F00";/*设置填充颜色*/
cxt.fillRect(0,0,200,100);/*绘制一个矩形，前两个参数决定开始位置，后两个分别是矩形的宽和高*/
cxt.beginPath();
cxt.strokeStyle="#000";/*设置边框*/
cxt.lineWidth=3;/*边框的宽度*/
cxt.strokeRect(0,120,200,100);
cxt.beginPath();
cxt.moveTo(0,350);
cxt.lineTo(100,250);
cxt.lineTo(200,300);
cxt.closePath();/*可选步骤，关闭绘制的路径*/
cxt.stroke();
/script

效果图：

来源:http://www.tulaoshi.com/n/20160219/1595124.html

上一篇：关于struts返回对象json格式数据的方法
下一篇： mysql主从服务器同步心得体会

看过《html5的画布canvas——画出简单的矩形、三角形实例代码》的人还看了以下文章更多>>

Photoshop制作三维立体三角形图标

标签： PS PS基础

先看效果图。新建文档950x790像素，背景白色，建新层，做一矩形选区，填充#b5b5b5。添加蒙版，黑白直线渐变，建新层，做一矩形选区，填充#d1d3d2，效果如下。建新层，用自定义选择工具画出下图所示形状，颜色任意。 Ctrl+T变形如下。添加图层样式。效果如下。底部建新层，用钢笔做如下选区，填充黑色。...

Photoshop设计视觉错位的立体三角形

标签： PS PS基础 ps平面设计教程 ps去水印教程

Photoshop设计视觉错位的立体三角形最终效果在Photoshop中新建文档，尺寸自定，背景填充35%灰色，画一矩形，颜色深一些。 Ctrl+J复制一层，ctrl+T设置及摆放位置如下。接着设置倾斜度，注意中心点位置，不按回车! 接着设置，注意中心点，回车确定变形。接着选择形状1，ctrl+T变形设置如下。合并2层，做如下选区，...

Photoshop设计三角形RSS订阅图标

标签： PS PS基础

先看效果图。新建文档1280x1024像素，背景白色，建新层，前景色白色画下图所示形状。添加图层样式。效果如下。复制一层，ctrl+T缩小些，为了让大家看清楚，我把颜色改为黑色。添加图层样式。效果如下。建新层，调出小三角选区，前景色#edde56用笔刷涂抹，效果如下。图层模式改为叠加，填充...

家居风水：家居风水：三角形建地

标签：家居风水风水禁忌

两条道路交叉处，会形成一块三角形建地，在家相学上，这种三角形建地上的住宅，家中不平安，对外多纷争，而且容易发生火灾，是极不理想的建地。假若我们在三角内画一个正方形或长方形，就能够了解三角形建地造起来的住宅实在很不经济，浪费许多有利用价值的土地，在隔间设计上也很不方便。按照面积上算，建筑费要比同面积...

Photoshop打造高光立体三角形图标