html5 Canvas画图教程(1)—画图的基本常识_html5教程技巧
虽然大家都称Canvas为html5的新标签,看起来好像Canvas属于html语言的新知识,但其实Canvas画图是通过javascript来做的。所以,如果你想学习Canvas画图,你必须要有Javascript基础。
另外,画图嘛,总有一些图像方面的术语和知识点,所以如果你有过做图或美工经验,学习Canvas会更容易。
Canvas,意为画布也。而Html5中的Canvas也真的跟现实生活中的画布非常相似。所以,把他看成一块实实在在的画布可以加快理解。
画布
用canvas作画,首先,你需要有一块“画布”。如果你的书架里面没有画布,你可以买一卷回来放进去。当然,在网页里面我们不需要花钱买,直接写一个canvas即可,类似:
其中标签里面的文字是给不支持canvas的浏览器看的,支持的永远看不到。
这个画布的特性有必要说一下,他有两个原生的属性,即width和height.同时,因为他也是一个html元素,所以他也可以使用css来定义width和height,但是,千万要注意:他自身的宽高和通过css定义的宽高是不一样的!
我们用JS来改变Canvas的宽高,是这样的:
canvas.width= 400
canvas.height = 300
但用JS通过操作CSS来改变Canvas的宽高,则是这样:
canvas.style.width = '400px'
canvas.style.height = '300px'
看得出来,语法上区别是很明显的。实际上区别更明显。
他们的区别是什么?
比如一块宽1000的画布,你在画布左侧画了一条竖线,宽100像素。此时你把画布自身的width设为500,相当于把画布的右半边咔嚓掉了,但此时那竖线的宽度还是100。
但如果你通过CSS来把画布的宽度变成500,那就相当于把画布由1000挤压到500,所以竖线的宽度变成了50.
(这只是理论情况,实际上设置canvas的宽度时,他会清空掉已画出来的内容。。)
Canvas自身的宽高就是画布本身的属性,而css给他的宽高则可以看作是缩放,如果你缩放的太过随意,那么画布上的图形可能变得你自己都认不出来。
所以有个建议:除非特殊情况,一定不要用css来定义Canvas的宽高。
画布有了,现在我们把他拿出来:
var cvs = document.getElementById('cvs');
看,跟获取其他元素的办法一模一样。
画笔
现在画布已经有了,想往上面涂鸦,当然还需要一只笔。canvas取得笔的方法如下:
var ctx = cvs.getContext('2d');其中getContext方法就是用来拿笔的,但这里还有个参数:2d,这是什么意思呢?这个可以看作是画笔的种类。
既然有2D,那么就会有3d了?以后估计会有,但现在没有。所以我们先用这只2d的笔吧。
那么我们可以多放几只笔来备用吗?答案是不能。
我要问一个问题:你画图的时候是同时用几只笔呢?相信99.9%的人都是只能用一只,虽然有些武林高手比如小龙女之类的可以两只手同时画,但这对一般人来说很不现实,是不是?
所以现在你可以感到欣慰了,因为html5的canvas标签也只支持同时用一支笔!
有的写JS写的比较熟的同学可能会想耍个小聪明:我用前面获取画笔的方法多整几只笔出来,不就行了?!
比如:
var con = cvs.getContext('2d');
var ctx = cvs.getContext('2d');
哈哈哈哈,好像成功了,在没测试之前我也是这么想的,但,其实这只是一个幻觉!
因为我发现,我把其中一支笔蘸上红墨水,另外一支笔也自动蘸上了红墨水!因为两支笔是一体的!fuck。
如果你需要画出不同的颜色,办法就是把这只唯一的“笔”不停的蘸上新颜色。
这其实不是一个优点,是个缺陷,以后你会体会到的。
坐标
2d世界,就是平面,在一个平面上确定一个点,需要两个值,x坐标和y坐标。这是一个很重要的基础概念。
canvas的原点是左上角,跟flash一样。但蛋疼的是数学中的原点是左下角。这个…只能说习惯就好
一些画图的基本常识
首先你需要知道,怎样的坐标变化会画出什么线?比如,x坐标变大而y坐标不变,则能画出一条横线;y坐标变化而x坐标不变,则是一条竖线。
当然,还有斜线,左斜线右斜线什么的,如果能对照图片,大部分人都能一看即懂;只是用代码画起来就比较郁闷了,只能靠逻辑思维想出来。
如果你现在感觉对线条一片混沌,也不用担心,在学习的过程中自然会理解。
其他
canvas有一个和现实的画布不一样的特点就是,他默认是透明的,没有背景色。这在大部分时候非常重要。

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

得物APP是当前十分火爆品牌购物的软件,但是多数的用户不知道得物APP中功能如何的使用,下方会整理最详细的使用教程攻略,接下来就是小编为用户带来的得物多功能使用教程汇总,感兴趣的用户快来一起看看吧!得物使用教程【2024-03-20】得物分期购怎么使用【2024-03-20】得物优惠券怎么获得【2024-03-20】得物人工客服怎么找【2024-03-20】得物取件码怎么查看【2024-03-20】得物求购在哪里看【2024-03-20】得物vip怎么开【2024-03-20】得物怎么申请退换货

如何升级numpy版本:简单易懂的教程,需要具体代码示例引言:NumPy是一个重要的Python库,用于科学计算。它提供了一个强大的多维数组对象和一系列与之相关的函数,可用于进行高效的数值运算。随着新版本的发布,不断有更新的特性和Bug修复可供我们使用。本文将介绍如何升级已安装的NumPy库,以获取最新特性并解决已知问题。步骤1:检查当前NumPy版本在开始

在购买显示器的时候对其进行测试是必不可少的一环,能够避免买到有损坏的,今天小编教大家来使用软件对显示器进行测试。方法步骤1.首先要在本站搜索下载DisplayX这款软件,安装打开,会看到提供给用户很多种检测方法。2.用户点击常规完全测试,首先是测试显示器的亮度,用户调节显示器使得方框都能看得清。3.之后点击鼠标即可进入下一环节,如果显示器能够分清每个黑色白色区域那说明显示器还是不错的。4.再次单击鼠标左键,会看到显示器的灰度测试,颜色过渡越平滑表示显示器越好。5.另外在displayx软件中我们

PhotoshopCS是PhotoshopCreativeSuite的缩写,由Adobe公司出品的软件,被广泛用于平面设计和图像处理,作为新手学习PS,今天就让小编为您解答一下photoshopcs5是什么软件以及photoshopcs5使用教程。一、photoshopcs5是什么软件AdobePhotoshopCS5Extended是电影、视频和多媒体领域的专业人士,使用3D和动画的图形和Web设计人员,以及工程和科学领域的专业人士的理想选择。呈现3D图像并将它合并到2D复合图像中。轻松编辑视

随着智能手机的不断发展,手机的功能也变得越来越强大,其中截长图功能成为了许多用户日常使用的重要功能之一。截长图可以帮助用户将一个较长的网页、对话记录或者图片一次性保存下来,方便查阅和分享。而在众多手机品牌中,华为手机也是备受用户推崇的一款品牌之一,其截长图功能也备受好评。本文将为大家介绍华为手机截长图的正确方法,以及一些专家技巧,帮助大家更好地利用华为手机的

夏天雨后,经常能见到一种美丽且神奇的特殊天气景象——彩虹。这也是摄影中可遇而不可求的难得景象,非常出片。彩虹出现有这样几个条件:一是空气中有充足的水滴,二是太阳以较低的角度进行照射。所以下午雨过天晴后的一段时间内,是最容易看到彩虹的时候。不过彩虹的形成受天气、光线等条件的影响较大,因此一般只会持续一小段时间,而最佳观赏、拍摄时间更为短暂。那么遇到彩虹,怎样才能合理将其记录下来并拍出质感呢?1.寻找彩虹除了上面提到的条件外,彩虹通常出现在阳光照射的方向,即如果太阳由西向东照射,彩虹更有可能出现在东

PHP教程:如何将int类型转换为字符串在PHP中,将整型数据转换为字符串是一种常见的操作。本教程将介绍如何使用PHP内置的函数将int类型转换为字符串,同时提供具体的代码示例。使用强制类型转换:在PHP中,可以使用强制类型转换的方式将整型数据转换为字符串。这种方法非常简单,只需要在整型数据前加上(string)即可将其转换为字符串。下面是一个简单的示例代码
