用canvas绘画一些图形(图标)

最近在研究HTML5,发现其中的canvas用途很广。不但可以绘制图形,还可以制作图片线性渐变,而且还能渲染文字做成特效。 是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画,甚至可以进行实时视频处理和渲染。canvas元素会在网页上创建一个空白区域(画布),然后通过API操作这个区域...
摘要由CSDN通过智能技术生成

最近在研究HTML5,发现其中的canvas用途很广。不但可以绘制图形,还可以制作图片线性渐变,而且还能渲染文字做成特效。
是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画,甚至可以进行实时视频处理和渲染。
canvas元素会在网页上创建一个空白区域(画布),然后通过API操作这个区域,与空白的div元素相似,用途完全不同(给予一块选中的画布,在其中操作)!
在网页中很多图标,都是用canvas绘画出来的,比如以前看到的那种箭头→这种都是可以画出来的!我们也做几个实例,画画

Html代码:  <canvas id="canvasFive" width="600" height="250">
                             
                       </canvas>

 js代码:      var canvas = document.getElementById("canvasFive");
                    var context = canvas.getContext("2d");
                    context.beginPath();
                    //设置是个顶点的坐标,根据顶点制定路径
                    for (var i = 0; i < 5; i++) {
   
                   context.lineTo(Math.cos((18+i*72)/180*Math.PI)*50+200,
                         -Math.sin((18+i*72
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值