![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
canvas
文章平均质量分 74
ice_i_snow
这个作者很懒,什么都没留下…
展开
-
Canvas学习笔记(一)--基础知识
1、<canvas>元素 id:不是<canvas>元素专享,和标准的html标签一样,都可以为元素指定id;width:元素宽度,默认为300px。可以通过dom和css进行设置;height:元素高度,默认为150px。可以通过dom和css进行设置;注:使用css设置width和height时,渲染图像会缩放适应布局,这意味着图像发生了变形,...原创 2012-03-09 09:36:37 · 103 阅读 · 0 评论 -
Canvas学习笔记(二)--绘图(矩形)
1、canvas网格坐标 左上角为坐标原点(0,0),横轴X向右坐标值增大,纵轴Y向下坐标值增大。坐标系中所有物体的位置都相对于这个原点。如图所示,蓝色方块的位置距左边x像素,距上面y像素,坐标为(x,y)。 2、绘制矩形 fillRect(x,y,width,height):绘制填充颜色的矩形; strokeRect(x,y,width,height):绘制带有边框的...原创 2012-03-09 10:18:57 · 232 阅读 · 0 评论 -
Canvas学习笔记(三)--绘图(路径【直线】)
1、绘制路径的方法 beginPath():开始一个新路径。 closePath():关闭路径。 stroke():绘制路径边框。 fill():使用颜色填充路径绘制的图形。 moveTo(x,y):设置坐标的位置。 lineTo(x,y):绘制一条直线。参数(x,y)是终点的坐标,起点坐标取决于前一路径(即:前一路径的终点就是当前路径的...原创 2012-03-09 10:38:40 · 166 阅读 · 0 评论 -
Canvas学习笔记(四)--绘图(路径【弧线】)
1、绘制弧线的方法 arc(x, y, radius, startAngle, endAngle, anticlockwise) x,y:圆心的坐标; radius:圆心的半径; startAngle:起始弧度(以横轴X为标准); endAngle:终止弧度(以横轴X为标准); anticlockwise: true表示逆时针,false表示顺时针; 注:...原创 2012-03-09 11:28:35 · 162 阅读 · 0 评论 -
Canvas学习笔记(五)--绘图(贝赛尔曲线)
1、二次贝塞尔曲线介绍 quadraticCurveTo(cpx,cpy,x,y) cpx,cpy表示控制点的坐标; x,y表示终点坐标; 数学公式表示如下: 二次方贝兹曲线的路径由给定点P0、P1、P2的函数B(t)追踪: 2、二次贝赛尔曲线实例 <!DOCTYPE html PUBLIC "-//W3C//DTD...原创 2012-03-09 16:52:38 · 185 阅读 · 0 评论 -
Canvas学习笔记(六)--绘图(综合使用)
首先看看需要完成的图像: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/...原创 2012-03-10 09:21:11 · 124 阅读 · 0 评论 -
Canvas学习笔记(七)--应用图像
1、图像简介 此功能可以用于图片合成或者制作背景等。目前仅可以在图像中加入文字(标准说明中并没有包含绘制文字的功能)、加入图片(如 PNG,GIF,JPEG等)、加入其他的canvas元素。 2、引入图像的步骤 1)获取JavaScript的Image对象或者其它的canvas元素。但不能是简单的image路径或url; 2)使用drawImage()函数绘制图...原创 2012-03-12 14:28:41 · 118 阅读 · 0 评论 -
Canvas学习笔记(八)--样式
1、设置颜色 fillStyle = color; //设置填充颜色 strokeStyle = color; //设置边框颜色 color可以是表示 CSS 颜色值的字符串,渐变对象或者图案对象。默认为黑色(#000000)。 // 这些 fillStyle 的值均为 '红色' ctx.fillStyle = "red"; ctx.fillSt...原创 2012-03-13 11:34:07 · 102 阅读 · 0 评论