h5学习笔记之canvas绘图（1）

一、canvas标签的说明
在设置cancas大小的时候，必须在标签内写，如果在css内写会发生变化
默认宽度300px，默认高度 150px 背景颜色红色的一个长方形

  <canvas width=""  height=""  id="">   您的浏览器不支持canvas，请更换浏览器！</canvas>

二、成功使用canvas绘图的前提
需要2d渲染环境

     <canvas id="can" width="500" height="500">您的浏览器不支持canvas,请您更换浏览器！</canvas><script>var can = document.getElementById("can");var cxt = can.getContext("2d");//2d渲染环境

三、绘制画图的各种属性方法
1、
绘制矩形属性:
1、 fillRect(x,y,w,h) 填充实心矩形 x y w h
起点x轴位置起点y轴位置宽高

        var can = document.getElementById("can");var cxt = can.getContext("2d");//2d渲染环境cxt.fillRect(50,50,100,100);//填充方法绘制实心矩形

如：
2、 strokeRect(x,y,w,h) 绘制空心矩形 x y w h

                                                                  起点x轴位置       起点y轴位置        宽                 高var can = document.getElementById("can");var cxt = can.getContext("2d");//2d渲染环境cxt.strokeRect(50,50,100,100);//触笔方法绘制空心矩形

3、 clearRect(x,y,w,h) 清除矩形选区，可以把2d环境内的在清除代码前面的画布内的内容
x y w h
清楚x起点清楚起点宽高

       var can = document.getElementById("can");var cxt = can.getContext("2d");//2d渲染环境cxt.strokeRect(50,50,100,100);//触笔方法绘制空心矩形cxt.fillRect(50,50,100,100);//填充方法绘制实心矩形cxt.clearRect(0,0,can.width,can.height);//清楚画布内容  从0.0 开始 清除500*500

四、
设置绘图样式：
fillStyle: 填充颜色
strokeStyle: 触笔颜色
lineWidth: 触笔宽度(线宽)
1、 fillStyle: 填充颜色
用于对 fillRect(x,y,w,h) 填充实心矩形的内容颜色
2、strokeStyle: 触笔颜色用于对 strokeRect(x,y,w,h) 绘制空心矩形或者线条的颜色
3、lineWidth: 触笔宽度(线宽) 用于对 strokeRect(x,y,w,h) 绘制空心矩形或者线条的大小
五、
绘图路径:
beginPath() :开始路径
closePath():结束路径
moveTo(x,y):将触笔移动到x,y点
lineTo(x,y):绘制到x,y点
stroke(): 触笔方法画线默认为黑色
fill():填充方法
rect(x,y,w,h):矩形路径
save():保存路径
restore():恢复路径
1、首先
moveTo(x,y):将触笔移动到x,y点
lineTo(x,y):绘制到x,y点
stroke(): 触笔方法画线默认为黑色
的结合使用
如：绘制一个空心三角形，三条线条

     cxt.moveTo(200,200);//绘制线条的起点cxt.lineTo(300,200);//绘制线条终点cxt.stroke();   需要执行这个笔触方法才能显示出来线条cxt.moveTo(300,200);//下一条线条的起点cxt.lineTo(250,100);//下一条线条的终点cxt.stroke();cxt.moveTo(200,200);//下一条线条的起点cxt.lineTo(250,100);//下一条线条的终点cxt.stroke();

2、绘制一个实心三角形，需要开始路径和结束路径，也可以不需要写每一段的开始路径，只需要有一个开始路径，然后写两个结束路径就可以了
beginPath() :开始路径
closePath():结束路径

                   cxt.beginPath();//开始路劲cxt.moveTo(200,200);//绘制线条的起点cxt.lineTo(300,200);//绘制线条终点cxt.lineTo(250,100);//下一条线条的终点cxt.closePath();//结束路劲cxt.fill();//cxt.moveTo(200,200);//下一条线条的起点//cxt.lineTo(250,100);//下一条线条的终点//cxt.stroke();

3、
fill():填充方法
rect(x,y,w,h):矩形路劲
这两个与上面的绘制矩形的是一样的，只是分开了
4、
save():保存路劲
restore():恢复路劲
如下面绘制的图形:
在没有使用save 与 restore 之前的样式是这样的，下面两个三角形是一样的

使用后：其实save 与 restore 使用后就相当于把中间哪个三角形独立起来，上面没有使用使的中间的颜色设置影响下面的（下面的没有设置颜色，所有会被影响到），现在把中间的独立起来，那么第三个就会受第一个三角形的影响

        //这里是一个三角形var can = document.getElementById("can");var cxt = can.getContext("2d");//2d渲染环境cxt.strokeStyle = "#03f"; //设置触笔方法的颜色cxt.fillStyle = "#339933";cxt.lineWidth = 10;cxt.beginPath();//开始路劲cxt.moveTo(200,200);//绘制线条的起点cxt.lineTo(300,200);//绘制线条终点cxt.lineTo(250,100);//下一条线条的终点cxt.closePath();//结束路劲cxt.stroke();cxt.fill();//这里也是一个三角形//新开辟一个空间来绘制图形cxt.save();//保存之前的画布内容cxt.strokeStyle = "#990000";cxt.fillStyle = "#ff0099";cxt.beginPath();//开始路劲cxt.moveTo(200,300);cxt.lineTo(300,290);cxt.lineTo(350,200);cxt.closePath();//结束路劲cxt.stroke();cxt.fill();cxt.restore();//释放之前的画布内容//这里也是一个三角形//cxt.strokeStyle = "#03f"; //设置触笔方法的颜色//cxt.fillStyle = "#339933";cxt.beginPath();//开始路劲cxt.moveTo(200,400);cxt.lineTo(300,390);cxt.lineTo(350,300);cxt.closePath();//结束路劲cxt.stroke();cxt.fill();

5、图形边界样式：
lineJoin : 边界连接点样式
miter(默认值),round(圆角),bevel(斜角)
lineCap: 端点样式
butt(默认值),round(圆角),square(高度多出线宽一半
1、lineJoin : 边界连接点样式
如：

     var can = document.getElementById("can");var cxt = can.getContext("2d");//2d渲染环境cxt.lineWidth = 10;//cxt.lineJoin = "round";   //设置圆角cxt.lineJoin = "bevel";  设置斜角cxt.rect(50,50,100,100);//设置矩形路径：x,y,w,hcxt.stroke();//触笔方法 绘制一个空心的矩形

2、lineCap: 端点样式，线条端点的样式 butt(默认值),round(圆角),square(高度多出线宽一半)

         var can = document.getElementById("can");var cxt = can.getContext("2d");//2d渲染环境cxt.strokeStyle = "#03f"; //设置触笔方法的颜色cxt.lineWidth = 20;cxt.lineCap = "round";cxt.moveTo(200,200);//绘制线条的起点cxt.lineTo(300,200);//绘制线条终点cxt.stroke();

3、绘制圆形
arc(x,y,r,半径,顺逆)
x , y 圆心坐标位置
r 圆半径
0,360 从0度到360度绘制一个圆形
true/false 顺时针/逆时针绘图

      var can = document.getElementById("can");var cxt = can.getContext("2d");//2d渲染环境cxt.fillStyle = "#ffcc33";cxt.lineWidth = 10;cxt.arc(250,250,50,0,360,false);//设置圆形路劲:圆心坐标xy 圆半径 0-360度  逆时针cxt.stroke();cxt.fill();

4、
绘制曲线
arcTo(x1,y1,x2,y2,r)
x1,y1 坐标一 x2,y2坐标二 r圆弧半斤
quadraticCurveTo(dx,dy,x1,y1)
贝塞尔曲线:dx,dy控制点 x1,y1结束坐标
bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1)
贝塞尔曲线:dx1,dy1 控制点一 dx2,dy2控制点二
x1,y1结束坐标
第一种： arcTo(x1,y1,x2,y2,r)
x1,y1 坐标一 x2,y2坐标二 r圆弧半斤

         var can = document.getElementById("can");var cxt = can.getContext("2d");//2d渲染环境//cxt.fillStyle = "#ffcc33";cxt.lineWidth = 10;cxt.moveTo(100,200);cxt.arcTo(100,100,200,100,50); cxt.stroke();//cxt.fill();如图所示：从100.200开始向上到100，100 然后到200.100  弧度为这三给 点构成的三角形内的弧度，半径为50

第二种
quadraticCurveTo(dx,dy,x1,y1)
贝塞尔曲线:dx,dy控制点 x1,y1结束坐标

       var can = document.getElementById("can");var cxt = can.getContext("2d");//2d渲染环境//cxt.fillStyle = "#ffcc33";cxt.lineWidth = 10;cxt.moveTo(100,200);cxt.quadraticCurveTo(50,50,300,100)  cxt.stroke();如图，三个点构成的三角形内的弧

第三种
贝塞尔曲线:dx1,dy1 控制点一 dx2,dy2控制点二
x1,y1结束坐标

       var can = document.getElementById("can");var cxt = can.getContext("2d");//2d渲染环境//cxt.fillStyle = "#ffcc33";cxt.lineWidth = 10;cxt.moveTo(100,200);//起点位置cxt.bezierCurveTo(100,100,300,300,300,100)cxt.stroke();如图：从起点到第一个控制点到第二个到结束点

h5学习笔记之canvas绘图（1）相关推荐

VC学习笔记：简单绘图
VC学习笔记:简单绘图 SkySeraph Oct.29th 2009 HQU Email-zgzhaobo@gmail.com QQ-452728574 Latest Modified Date ...
matlab学习笔记9 高级绘图命令_2 图形的高级控制_视点控制和图形旋转_色图和颜色映像_光照和着色
一起来学matlab-matlab学习笔记9 高级绘图命令_2 图形的高级控制_视点控制和图形旋转_色图和颜色映像_光照和着色觉得有用的话,欢迎一起讨论相互学习~ 参考书籍 <matlab 程 ...
MATLAB学习笔记5：绘图基础与数据可视化（中）
阅读前请注意: 1. 该学习笔记是华中师范大学HelloWorld程序设计协会2021年寒假MATLAB培训的学习记录,是基于培训课堂内容的总结归纳.拓展阅读.博客内容由 @K2SO4钾撰写.编辑, ...
html画布创建黑白象棋棋盘,HTML5学习与加固——canvas绘图象棋盘
1 2 3 4 5 6 canvas绘图_象棋盘 7 8 9 10 不支持Canvas 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 varob ...
html5 canvas 画阿迪达斯logo,HTML5 Canvas笔记——HTML5 Canvas绘图绘制太极图
HTML5 Canvas绘图绘制太极图太极图 * { padding: 0; margin: 0; } body { } #myCanvas { background-color: #eee; } ...
HTML 5 学习笔记之 canvas 标签
Canvas是HTML5中的画布API,用来帮助大家在浏览器上快速的绘制图形图像. Canvas是什么? HTML5 <canvas> 元素可以用来通过使用脚本来绘制图形图像.<ca ...
《数学建模简明教程--基于python》学习笔记-第二章-绘图与解方程组-课后习题解答
文章目录准备工作 01 绘制双曲函数图像 02 绘制伽马函数图像 03 单个窗口绘制二次函数(k=1,2,...,6) 04 根据不同K值绘制子图 05 绘制二次曲面 05-1 绘制单叶双曲面 05 ...
HTML5css3学习总结(4)canvas绘图
canvas HTML5 重中之重 canvas是HTML5中的重点:今天简单的学习了一下,总结一下canvas的概念:canvas是要有面向对象的思维:各个标签就像我们画水彩画一样,需要注意标签使用 ...
Python基础学习笔记——用海龟绘图实现两两相连
学习目标: 使用海龟绘图.输入多个点,将这些点都两两相连. 代码: def connect_dot(*args):for i in range(len(args) - 1):for j in rang ...

h5学习笔记之canvas绘图（1）

h5学习笔记之canvas绘图（1）相关推荐

最新文章

热门文章