HTML5自学笔记[ 17 ]canvas绘图基础4

  • 绘制图像：
  1. drawImage(oImg,x,y),oImg是一个Image对象，(x,y)为绘制起点，绘制的图像大小和源图大小一样。
  2. drawImage(oImg,x,y,w,h),后两个参数设置绘制后的图形大小。
  3. drawImage(oImg,x1,y1,w1,h1,x2,y2,w2,h2),该方法获取源图像的一部分进行绘制并且指定绘制起点和绘制后图像的大小，x1/y1/w1/h1表示选取源图上(x1,y1)点起宽w1高h1的部分，x2/y2/w2/h2表示将选取的部分绘制到画布(x2,y2)的地方，并且宽高为w2/h2。
  • 渐变
  1. 线性渐变createLinearGradient(x1,y1,x2,y2),4个参数分别代表起点和重点的坐标。
  2. 径向渐变createRadialGradient(x1,y1,r1,x2,y2,r2),6个参数分别代表两个圆的圆心和半径。
  3. 以上两个方法创建了渐变对象后，要使用addStopColor()来指定色标；该方法接收两个参数：色标位置和颜色。
  4. 最后将渐变对象赋给fillStyle或strokeStyle后就可以绘制出渐变效果了。
  • 模式
  1. 公式：createPattern(oImg,repeatStyle),oImg是一个img元素，repeatStyle是一个字符串，表示重复方式，可选值和样式中背景的重复一样，包括"repeat","repeat-x","repeat-y","no-repeat"。
  2. 模式的第一个参数也可以是一个video元素，或者另外一个canvas元素。
  3. 注：模式和渐变一样，是从画布的原点(0,0)开始的，将样式填充设置为模式对象，只表示某个特定的区域内显示重复的图像，而不是要从某个位置开始绘制重复的图像；如：

    1 var pattern = oContext.createPattern(oImg,0,0);
2 oContext.fillStyle = pattern;
3 oContext.fillRect(20,20,100,100);

    只会看见第一行和第一列的图片显示不全，少了上面和左边的20像素，这是因为图像不是从矩形原点开始重复，而是从画布原点开始重复的。

  • 绘制文本
  1. font属性设置文本的样式、大小和字体。其中，字体是必填项。如："16px arial"。
  2. textAlign:文本水平对齐方式，可选值有start/end/center/left/right；建议使用start/end。
  3. textBaseLine:文本垂直对齐方式，默认alphabetic，可选值有top/bottom/middle/alphabetic/ideographic/hanging。
  4. 绘制文本一样有填充和描边两种方式：fillText()、strokeText();这两个方法接收四个参数：str/x/y/maxWidth；maxWidth是最大宽度，如果文本长度大小该值就会在高度符合的情况下收缩。
  5. mesureText(str):该方法可以测量要绘制的文本str的宽度，该方法返回一个TextMetric对象，该对象的属性width就是文本宽度。
  • 阴影
  1. 设置shadowColor指定阴影颜色，默认透明的黑色，因此，如果不设置该属性，就看到阴影效果。
  2. 设置shadowOffsetX指定阴影在x方向的偏移量，默认0。
  3. 设置shadowOffsetY指定阴影在y方向的偏移量，默认0。
  4. 设置shadowBlur指定模糊的像素数，默认0，既不模糊。
时间： 2024-12-24 17:02:51

HTML5自学笔记[ 17 ]canvas绘图基础4的相关文章

HTML5自学笔记[ 14 ]canvas绘图基础2

canvas绘制路径不仅可以绘制直线和多边形,还提供了绘制曲线的方法,利用这些方法可以画出多种曲线效果. 方法1:arc(x,y,r,起始弧度,结束弧度,绘制方向);其中(x,y)为圆心坐标,r为半径,弧度计算公式:deg*Math.PI/180,绘制方向默认为false表示顺时针绘制 ,设置为true时,逆时针绘制. 例1,顺时针绘制0-90°圆弧: 1 oContext.beginPath(); 2 3 oContext.arc(300,300,200,0,90*Math.PI/180,fa

HTML5自学笔记[ 15 ]canvas绘图基础6

关于线条的一些属性: lineCap,这个属性表示的是线条两端的样式,值有butt(默认)/round/square. lineJoin,这个属性表示线条相交的方式,值有miter(默认)/bevel/round: miterLimit,该属性指定默认情况下lineJoin采用miter方式的极限值:比如,在上面的例子中,将miterLimit设置为1,那么第一个图的两条线的相交方式就会自动转变为bevel.

HTML5自学笔记[ 21 ]canvas绘图实例之马赛克

1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>马赛克</title> 6 <style> 7 body{background:#000;} 8 canvas{background: #fff; margin-left:500px;} 9 </style> 10

HTML5自学笔记[20 ]canvas绘图实例之绘制倒影

1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>倒影</title> 6 <style> 7 body{background:#000;} 8 canvas{background: #fff; margin-left:500px;} 9 </style> 10

HTML5自学笔记[ 24 ]canvas绘图之星空草地

1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 <style> 8 body{ background:#fff;} 9 div{ width:800px; height:600px; margin:0 auto;} 10 canvas{ backg

Android中Canvas绘图基础详解

原文:http://blog.csdn.net/iispring/article/details/49770651 Android中,如果我们想绘制复杂的自定义View或游戏,我们就需要熟悉绘图API.Android通过Canvas类暴露了很多drawXXX方法,我们可以通过这些方法绘制各种各样的图形.Canvas绘图有三个基本要素:Canvas.绘图坐标系以及Paint.Canvas是画布,我们通过Canvas的各种drawXXX方法将图形绘制到Canvas上面,在drawXXX方法中我们需要

Android中Canvas绘图基础详解（附源码下载）

Android中,如果我们想绘制复杂的自定义View或游戏,我们就需要熟悉绘图API.Android通过Canvas类暴露了很多drawXXX方法,我们可以通过这些方法绘制各种各样的图形.Canvas绘图有三个基本要素:Canvas.绘图坐标系以及Paint.Canvas是画布,我们通过Canvas的各种drawXXX方法将图形绘制到Canvas上面,在drawXXX方法中我们需要传入要绘制的图形的坐标形状,还要传入一个画笔Paint.drawXXX方法以及传入其中的坐标决定了要绘制的图形的形状

Canvas绘图基础（一）

简单图形绘制 矩形:描边与填充 Canvas的API提供了三个方法,分别用于矩形的清除.描边及填充 clearRect(double x, double y, double w, double h) strokeRect(double x, double y, double w, double h) fillRect(double x, double y, double w, double h) 看一下这三个方法的使用 <!DOCTYPE html> <html lang="z

Html5 Canvas笔记(2)-Canvas绘图

用Canvas API绘图,需要画图形的边线并设置内部区域填充,边线英文语法对应stroke,填充对应fill,在后面我们会频繁看到这2个英文单词的出现.Canvas API内置的形状绘图函数比较少,可以完成绘制矩形Rect.弧形Arc,也可以画贝塞尔曲线bezierCurver.quadraticCurve.下面我们一个一个的来说. 画线-Line 1 function drawScreen(){ 2 context.strokeStyle='black'; 3 context.lineWid