玩转html5 画图

路径

绘制线段

绘制贝塞尔曲线

线性渐变

径向渐变(发散)

图形变形(平移、旋转、缩放)

矩阵变换(图形变形的机制)

图形组合

给图形绘制阴影

绘制图像(图片平铺、裁剪、像素处理[不只图像、包括其他绘制图形])

绘制文字

保存和恢复状态(context)

保存文件

结合setInterval制作动画

结语、demo下载

 

前言

<canvas></canvas>是html5出现的新标签,像所有的dom对象一样它有自己本身的属性、方法和事件,其中就有绘图的方法,js能够调用它来进行绘图 ,最近在研读《html5与css3权威指南》下面对其中最好玩的canvas的学习做下读书笔记与实验。

温馨提示:以下所有实验请使用最新版的opera

顶部

基本知识

    context:一直觉得这个翻译成“上下文”真够蛋疼的,context是一个封装了很多绘图功能的对象,获取这个对象的方法是  

        var context =canvas.getContext("2d");

也许这个2d勾起了大家的无限遐想,但是很遗憾的告诉你html5还只是个少女,不提供3d服务。

   

canvas元素绘制图像的时候有两种方法,分别是

context.fill()//填充

context.stroke()//绘制边框

style:在进行图形绘制前,要设置好绘图的样式

context.fillStyle//填充的样式

context.strokeStyle//边框样式

context.lineWidth//图形边框宽度

颜色的表示方式:

直接用颜色名称:"red" "green" "blue"

十六进制颜色值: "#EEEEFF"

rgb(1-255,1-255,1-255)

rgba(1-255,1-255,1-255,透明度)

和GDI是如此的相像,所以用过GDI的朋友应该很快就能上手

顶部

绘制矩形  context.fillRect(x,y,width,height)  strokeRect(x,y,width,height)

     x:矩形起点横坐标(坐标原点为canvas的左上角,当然确切的来说是原始原点,后面写到变形的时候你就懂了,现在暂时不用关系)

     y:矩形起点纵坐标

     width:矩形长度

     height:矩形高度

玩转html5 画图

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwjswx.html