html5的画布canvas——画出简单的矩形、三角形实例代码
发布时间：2013-06-09 15:40:43 作者：佚名 
我要评论
我要评论有两种形式，一种是描边（fill），一种是填充（stroke），具体的实现代码如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
首先在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>
效果图：
复制代码
代码如下:<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使用方法，canvas 是一个矩形区域，可以控制其每一像素，介绍了canvas的多种功能，感兴趣的小伙伴们可以参考一下2016-03-18
- 这篇文章主要介绍了使用分层画布来优化HTML5渲染的教程,来自于IBM官方网站开发者技术文档,需要的朋友可以参考下2015-05-08
- 本文介绍了JS和html5实现画布旋转效果示例，大家参考使用吧2014-01-27
- html5的canvas很强大利用其画布可轻松绘制贝塞尔曲线，为大家以后使用方便，特于此分享实现代码，有此需求的朋友可以参考下2013-08-14
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
在做旋转操作之前一定要理解一句话：旋转的是画布的坐标系而不是图形本身，首先认识一下画圆的坐标：中心、起始角、结束角；接下来的就很简单了2013-06-09- Html5 引入了一个新的2010-09-21
这篇文章主要介绍了Html5画布,canvas 元素用于在网页上绘制图形。有兴趣的小伙伴可以一起来了解一下2017-07-13
最新评论