欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

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

发布时间:2016-11-27  编辑:杨雨个人博客网站   点击:   

起首在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>

结果图:
Html5的画布canvas——画出简单的矩形、三角形实例代码 本文地址:http://itbyc.com/web/html5/13541.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1