• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
楠木2017 显示全部楼层 发表于 2021-10-25 19:36:35 |阅读模式 打印 上一主题 下一主题
首先在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>

结果图:

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作