cansvas基础入门(一)
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了cansvas基础入门(一)相关的知识,希望对你有一定的参考价值。
参考技术A canvas,是一个H5的新标签,通过js来实现绘图的神奇功能。<canvas> 标签只是图形容器,您必须使用脚本来绘制图形。
那么我们怎么来使用canvas标签呢?
注意,在这里我直接在行间设置了宽高,是因为若不设定宽高,浏览器会默认设置canvas大小为宽300、高100像素,而且不能使用css来设置(会被拉伸),建议直接写于canvas标签内部,或者是直接用js脚本中来设置。如下:
首先,获取canvas的绘图环境,这是一个封装了很多绘图功能的对象。
来举个栗子
我们使用了几个绘图方法:
1.moveTo(x坐标 , y坐标) 可以理解为定位画笔在画布上的位置
2.lineTo(x坐标 , y坐标) 顾名思义,就是画一条直线到某个点,此方法只做路径运动,并没有视觉上的效果。
3.stroke() 描边方法 让运动路径从视觉上显现 用 画笔描出来
4.strokeStyle 设定颜色的方法 可以直接用颜色名称,例如"red" "green",或者用十六进制颜色"#fff",还有rgb(0-255,0-255,0-255), rgba(0-255,0-255,0-255,透明度)。
栗子2 用canvas写出两个不一样颜色的线 :
关于路径beginPath和closePath
1、系统默认在绘制第一个路径的开始点为beginPath
*2、如果画完前面的路径没有重新指定beginPath,那么画第其他路径的时候会将前面最近指定的beginPath后的全部路径重新绘制
ps:记住每次画路径都在前后加gd .beginPath() 和gd .closePath()
当然canvas也可以绘制出各种图形
栗子3 绘制矩形
绘制矩形有两个小方法:
1 context.fillRect(x,y,width,height) 所谓的满矩形就是填充一个矩形
2 strokeRect(x,y,width,height) 绘制矩形(不填色)。笔触的默认颜色是黑色。
相反 清除矩形区域即为
canvas更多有趣的东西,我们下次再讲~~~
如何入门爬虫(基础篇)
一、爬虫入门-
Python爬虫入门一之综述
-
Python爬虫入门二之爬虫基础了解
-
Python爬虫入门三之Urllib库的基本使用
-
Python爬虫入门四之Urllib库的高级用法
-
Python爬虫入门五之URLError异常处理
-
Python爬虫入门六之Cookie的使用
- Python爬虫入门七之正则表达式
二、爬虫实战
-
Python爬虫实战一之爬取糗事百科段子
-
Python爬虫实战二之爬取百度贴吧帖子
-
Python爬虫实战三之实现山东大学无线网络掉线自动重连
-
Python爬虫实战四之抓取淘宝MM照片
-
Python爬虫实战五之模拟登录淘宝并获取所有订单
-
Python爬虫实战六之抓取爱问知识人问题并保存至数据库
-
Python爬虫实战七之计算大学本学期绩点
- Python爬虫实战八之利用Selenium抓取淘宝匿名旺旺
三、爬虫利器
-
Python爬虫利器一之Requests库的用法
-
Python爬虫利器二之Beautiful Soup的用法
-
Python爬虫利器三之Xpath语法与lxml库的用法
-
Python爬虫利器四之PhantomJS的用法
-
Python爬虫利器五之Selenium的用法
- Python爬虫利器六之PyQuery的用法
四、爬虫进阶
-
Python爬虫进阶一之爬虫框架概述
-
Python爬虫进阶二之PySpider框架安装配置
-
Python爬虫进阶三之爬虫框架Scrapy安装配置
- Python爬虫进阶四之PySpider的用法
如何获取:
添加小编Q群:789133747,即可获取本文书籍
以上是关于cansvas基础入门(一)的主要内容,如果未能解决你的问题,请参考以下文章