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更多有趣的东西,我们下次再讲~~~

如何入门爬虫(基础篇)

一、爬虫入门

  1. Python爬虫入门一之综述

  2. Python爬虫入门二之爬虫基础了解

  3. Python爬虫入门三之Urllib库的基本使用

  4. Python爬虫入门四之Urllib库的高级用法

  5. Python爬虫入门五之URLError异常处理

  6. Python爬虫入门六之Cookie的使用

  7. Python爬虫入门七之正则表达式

二、爬虫实战

  1. Python爬虫实战一之爬取糗事百科段子

  2. Python爬虫实战二之爬取百度贴吧帖子

  3. Python爬虫实战三之实现山东大学无线网络掉线自动重连

  4. Python爬虫实战四之抓取淘宝MM照片

  5. Python爬虫实战五之模拟登录淘宝并获取所有订单

  6. Python爬虫实战六之抓取爱问知识人问题并保存至数据库

  7. Python爬虫实战七之计算大学本学期绩点

  8. Python爬虫实战八之利用Selenium抓取淘宝匿名旺旺

三、爬虫利器

  1. Python爬虫利器一之Requests库的用法

  2. Python爬虫利器二之Beautiful Soup的用法

  3. Python爬虫利器三之Xpath语法与lxml库的用法

  4. Python爬虫利器四之PhantomJS的用法

  5. Python爬虫利器五之Selenium的用法

  6. Python爬虫利器六之PyQuery的用法

四、爬虫进阶

  1. Python爬虫进阶一之爬虫框架概述

  2. Python爬虫进阶二之PySpider框架安装配置

  3. Python爬虫进阶三之爬虫框架Scrapy安装配置

  4. Python爬虫进阶四之PySpider的用法

如何获取:
添加小编Q群:789133747,即可获取本文书籍

技术图片

以上是关于cansvas基础入门(一)的主要内容,如果未能解决你的问题,请参考以下文章

如何入门爬虫(基础篇)

python编程 基础入门一

Python入门基础学习 一

JAVA基础入门教程 -

Python基础入门一

PHP基础入门PHP函数基础