Html5 canvas学习1-描边 渐变 直线 矩形
来源:互联网 发布:王士营养配餐软件 编辑:程序博客网 时间:2024/06/08 08:33
1.坐标系统
默认是300*150像素大小,以左上角为原点。canvas 的左上角坐标为 (0,0)
可以通过下面方式来交换坐标:
平移(translate) 旋转(rotate) 缩放(scale)
2.创建
<canvas id="myCanvas" width="200" height="100"style="border:1px solid #000000;"></canvas><script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75);</script>
.getContext() 是canvas的绘图对象/方法,要让canvas执行绘图工作必须先获取canvas的.getContext()对象来执行。
.getContext()只接受一个参数,该参数用于获取canvas的绘图环境,例如.getContext(“2d”)表示该canvas的绘图环境为2D平面(可以绘制文本、直线、弧线、矩形、圆形等)。当前H5只支持2D环境,在不久的将来会开放3D绘图功能。
3.画线
<canvas id="myCanvas" width="200" height="200" style="border:solid 1px #CCC; margin:30px;">您的浏览器不支持canvas,建议使用最新版的Chrome</canvas><script>var c = document.getElementById("myCanvas");var ctx = c.getContext("2d"); //获取该canvas的2D绘图环境对象ctx.moveTo(0,0); //咱把“画笔”移到坐标(0,0)ctx.lineTo(150,50); //从上个点(0,0)画一条直线,结束点坐标是(150,50)ctx.lineTo(20,100); //从上个点(150,50)继续画一条直线,结束点坐标是(20,100)ctx.moveTo(90,90); //咱把“画笔”移到坐标(90,90)ctx.lineTo(80,150); //从上个点(60,60)继续画一条直线,结束点坐标是(80,150)ctx.strokeStyle = "red"; //设定描边颜色为红色,只要写在.stroke()方法前面即可ctx.stroke(); //描边</script>
结果如下:
两段分别上色:
<script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(150,50); ctx.lineTo(20,100); ctx.strokeStyle = "blue"; //设定描边颜色为蓝色 ctx.stroke(); ctx.beginPath(); //告诉canvas咱们要重新绘制一条全新的路径了,之前画的东西从此再无关系 ctx.moveTo(90,90); ctx.lineTo(80,150); ctx.strokeStyle = "red"; //设定描边颜色为红色 ctx.stroke(); </script>
.stroke() 描边方法,不给运动路径加stroke特效的画是不存在描边效果的,canvas也一样,想要运动路径轨迹能有视觉效果,需要使用相应的上色/描边方法
ctx.strokeStyle来设定描边的颜色
ctx.strokeStyle**可获值的形式有三种:
ctx.strokeStyle=color|gradient|pattern; //即支持 “颜色/渐变/图案笔刷” 的赋值
颜色color
color赋值方式,和我们常规的css赋值是一样的,支持css3颜色值标准
ctx.strokeStyle = "orange";ctx.strokeStyle = "#FFA500"; //#rrggbb形式
渐变gradient
渐变有LinearGradient线性渐变,另有放射状/圆形渐变RadialGradient(画矩形当中补充了该内容)
var c = document.getElementById("myCanvas");var ctx = c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(150,50); ctx.lineTo(20,100); var grd = ctx.createLinearGradient(0,0,170,0); //定义线性渐变对象,设定渐变线起始点和结束点坐标,坐标格式为(起始点x,起始点y,结束点x,结束点y)grd.addColorStop(0,"black"); //定义渐变线起点颜色grd.addColorStop(0.5,"red"); //定义渐变线中间点的颜色grd.addColorStop(1,"yellow"); //定义渐变线结束点的颜色ctx.strokeStyle = grd; //将渐变对象赋值给strokeStylectx.stroke(); //描边
图案描边pattern
strokeStyle之所以不叫strokeColor是因为它除了支持颜色描边还支持图案描边。
线性渐变描边需要先createLinerGradient(xstart,ystart,xend,yend),那么设置图案描边自然也要先新建一个canvasPattern对象:
createPattern(image, repetitionStyle)
其中参数 image 代表图案对象,一般通过 document.createElement(‘img’) 或者 new Image() ,再定义其src值来创建该对象。
而repetitionStyle参数很好理解,即图案重复形式,其可选值有”repeat” 、”repeat-x”、”repeat-y” 和”no-repeat” (和css的background-repeat可选值一样,不赘述)。
<canvas id="myCanvas" width="200" height="200" style="border:solid 1px #CCC; margin:30px;">您的浏览器不支持canvas,建议使用最新版的Chrome</canvas><script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); pic = new Image(); //创建图片对象,或者 pic = document.createElement('img') pic.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558870/o_5.jpg"; pic.onload = patternFill; //在图片加载完成时执行绘图函数 function patternFill() { //定义绘图函数 var redTexture = ctx.createPattern(pic, "repeat"); ctx.strokeStyle = redTexture; ctx.moveTo(80,10); ctx.lineTo(10,90); ctx.lineWidth = 8; //定义线段粗度为8像素 ctx.stroke(); }</script>
ctx.lineWidth
注意:上述的通过 ctx.lineWidth = lineWeight 的形式来给线段设定粗度。
另外两个重要的线段的属性
⑴ lineCap是设定线段端点的形状(线帽),其值可以是
butt 默认,即线条端点为平直的边缘
round 线条端点为圆角线帽
square 为线条端点添加正方形线帽
⑵ lineJoin则是设定折线的交接处的外角类型,其值可为:
miter 默认,折线交接处为尖角
round 折线交接处为圆角
bevel 折线交接处为斜角
4.画矩形
canvas的api提供了三种方法:
clearRect(double x,double y,double w,double h)//清除
strokeRect(double x,double y,double w,double h)//strokeRect 表示绘制一个描边矩形
fillRect(double x,double y,double w,double h)//表示绘制一个实心矩形
<canvas id="myCanvas" width="200" height="200" style="border:solid 1px #CCC;">您的浏览器不支持canvas,建议使用最新版的Chrome</canvas><script>var c = document.getElementById("myCanvas");var ctx = c.getContext("2d"); //获取该canvas的2D绘图环境对象ctx.fillRect(10,10,50,50); //从画布上的(10,10)坐标点为起始点,绘制一个宽高均为50px的实心矩形ctx.strokeRect(70,10,50,50); //从画布上的(70,10)坐标点为起始点,绘制一个宽高均为50px的描边矩形</script>
也可以使用 Rect( x, y, width, height ) 的方法创建矩形路径,之后再通过 .stroke() 或 .fill() 方法来给矩形上色。
fillStyle strokeStyle来定义上色,它们的赋值均为 color|gradient|pattern
补充:圆形渐变
ctx.createRadialGradient( Xstart, Ystart, Radiusstart, Xend, Yend, Radiusend )
var grd = ctx.createRadialGradient(35,35,0,35,35,36); //定义放射状渐变对象,设定渐变线起始点和结束点坐标,坐标格式为(起始点x,起始点y,结束点x,结束点y)grd.addColorStop(0,"yellow"); //定义渐变线起点颜色grd.addColorStop(0.5,"blue"); //定义渐变线中间点的颜色grd.addColorStop(1,"red"); //定义渐变线结束点的颜色ctx.fillStyle = grd; //将放射状渐变对象赋值给fillStylectx.fillRect(10,10,50,50); //从画布上的(10,10)坐标点为起始点,绘制一个宽高均为50px的实心矩形
clearRect清除
clearRect类似PS中的方块橡皮擦,可以擦除画布上任意一块矩形区域的内容,其语法如下:
ctx.clearRect( x, y, width, height );
其中 x 和 y 表示起始点坐标,width 和 height 表示这块“橡皮擦”的宽高。举个例子:
var c = document.getElementById("myCanvas");var ctx = c.getContext("2d"); //获取该canvas的2D绘图环境对象ctx.fillStyle = "red"; ctx.fillRect(0,0,c.width,c.height); ctx.beginPath();ctx.fillStyle = "blue"; ctx.fillRect(10,20,60,60); ctx.clearRect(20,20,80,50); //擦除以(20,20)坐标为起点,宽高为80*50的区域
注意clearRect不会清除掉之前定义过的样式、画笔位置等绘制信息,打个比方,有时候我们需要清空整个画布,我们可以这样做:
var c = document.getElementById("myCanvas");var ctx = c.getContext("2d"); //获取该canvas的2D绘图环境对象ctx.fillStyle = "blue"; ctx.fillRect(10,20,60,60); //下面重置画布大小,从而清空画布c.width = c.width; //在jQ中可以写为 c.attr("width", c.width()); c.height = c.height; //在jQ中可以写为 c.attr("height", c.height()); //重新绘制一个矩形ctx.fillRect(10,20,60,60);
这个方法是通过重置画布大小,从而触发清空画布事件,但前面定义的 fillStyle=”blue” 也被清空掉了.重画的是黑色
如果不想清除掉之前定义的样式,我们可以通过clearRect来实现:
var c = document.getElementById("myCanvas");var ctx = c.getContext("2d"); //获取该canvas的2D绘图环境对象ctx.fillStyle = "blue"; ctx.fillRect(10,20,60,60); //下面通过clearRect来擦除画布ctx.clearRect(0,0,c.width,c.height);//重新绘制一个矩形ctx.fillRect(10,20,60,60);
重画的是蓝色。
多边形
var c = document.getElementById("myCanvas");var ctx = c.getContext("2d"); //获取该canvas的2D绘图环境对象//定义样式ctx.fillStyle = "blue"; ctx.strokeStyle = "red";ctx.lineWidth = "8";ctx.lineJoin = "round";//绘制多边形ctx.moveTo(10,10);ctx.lineTo(100,30);ctx.lineTo(120,80);ctx.lineTo(60,60);ctx.lineTo(10,10);ctx.closePath(); //闭合多边形路径ctx.stroke(); //描边ctx.fill(); //填充
备注
canvas函数列表:http://www.runoob.com/tags/ref-canvas.html
canvas学习相关链接http://www.cnblogs.com/vajoy/p/3996979.html
https://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html
本文参考:http://www.runoob.com/html/html5-canvas.html
http://www.cnblogs.com/vajoy/p/3914131.html
- Html5 canvas学习1-描边 渐变 直线 矩形
- HTML5中canvas实现矩形颜色渐变
- Html5 Canvas初探学习笔记(1)-画一个矩形
- Html5 Canvas初探学习笔记(9) -渐变
- Html5学习------canvas绘制径向渐变图形
- html5 canvas学习--绘制线性渐变
- html5 canvas学习--绘制径向渐变
- html5 canvas 绘制矩形, 方法,线性渐变,径向渐变,透明等
- HTML5 Canvas 渐变
- html5 canvas元素渐变
- HTML5 Canvas(7) 渐变
- HTML5 Canvas: 绘制矩形
- HTML5之Canvas画布属性--画直线、画三角、画矩形
- HTML5 canvas图形绘制基础(矩形,线条,渐变色,圆形,图片,多边形)
- HTML5 Canvas 学习(1)
- HTML5学习笔记之使用canvas绘制矩形
- html5中的canvas线性渐变
- 画正圆角矩形 - HTML5 Canvas 作图
- 逻辑运算符解析
- 未能正确加载 “Microsoft.Entity.Design.BootstrapPackage.BootstrapPackage,Microsoft.Data.Entity未能正确加载 “Micro
- 对话框中怎样加入工具条综述
- well,c语言简易扫雷
- Maximum Sum of 3 Non-Overlapping Subarrays
- Html5 canvas学习1-描边 渐变 直线 矩形
- 安装虚拟机教程
- 皮尔逊相关系数和安斯库姆四重奏 pandas corr()函数
- [TensorFlow] demo1 创建100个float32的随机数x_data
- Java并发编程:CountDownLatch、CyclicBarrier和 Semaphore
- JSF 2.0 command button 为‘null Converter’设置值“......“时发生转换错误。
- linux 下安装python3
- 防止帐号重复登录,本地有效
- 请求https错误: unable to find valid certification path to requested target