请选择 进入手机版 | 继续访问电脑版
设为首页收藏本站

Android Studio 中文社区论坛

 找回密码
 立即注册
搜索
热搜: Android Sdk Gradle
查看: 568|回复: 0

[WINDOWS] HTML5中很好玩的canvas标签

[复制链接]

415

主题

413

帖子

1551

积分

金牌会员

Rank: 6Rank: 6

积分
1551
发表于 2016-7-12 20:56:11 | 显示全部楼层 |阅读模式

canvas是html5出现的新标签,主要用来画图,看见网上能用来实现各种图形,所以感觉很好玩,就学习了一下。希望对正在入门HTML5的童鞋有用。
canvas绘制图形有两种方法:


context.fill() //填充



context.stroke() //绘制边框


在绘制图形前要设置好图形样式,也有两种方法:


context.fillStyle() //填充的样式



context.strokeStyle() //边框样式



下面就开始绘制各种图形


绘制矩形
context.fillRect(x,y,width,height)
context.fillRect(x,y,width,height)
x : 矩形的起点横坐标
y : 矩形的起点纵坐标
width : 矩形的宽度


function draw(){

        var canvas = document.getElementById('chen'),

            context = canvas.getContext('2d');

            canvas.width = 100;

            canvas.height = 100;

            context.fillStyle = 'red';        //发现要先设置填充颜色

            context.fillRect(0, 0, 100 ,100);

            context.strokeRect(0, 100, 100 ,100);


    }

draw();



context.arc(x,y,radius,starAngle,endAngle, anticlockwose)
radius : 半径




原文来自:好JSER


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

AndroidStudio中文社区 ( 京ICP备06021553号 )  

资源: 安卓 | Android | 社区 | 问答 | APP | WEB | SEO | ASO | 软件外包 |

© 2013-2014 Android Studio

快速回复 返回顶部 返回列表