|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas</title> </head> <body> <canvas id="canvas" width="800" height="800"></canvas> <script> var ctx = canvas.getContext( "2d" ); // 获取画笔 ctx.beginPath(); ctx.lineWidth = 2; // 粗细 ctx.strokeStyle = 'rgb( 200, 200, 200 )'; // 颜色 ctx.moveTo( 100, 100 ); ctx.lineTo( 200, 200 ); ctx.lineTo( 100, 200 ); ctx.lineTo( 100, 100 ); ctx.stroke(); ctx.beginPath(); // 设置画笔属性 ctx.lineWidth = 2; // 粗细 ctx.strokeStyle = 'rgba( 255, 0, 0, 0.5 )'; // 颜色 // void quadraticCurveTo(in float cpx, in float cpy, in float x, in float y); ctx.moveTo( 100, 100 ); // 起始点 // 二次贝塞尔曲线 // 控制点 结尾点 ctx.quadraticCurveTo( 200, 200, 100, 200 ); // 渲染 ctx.stroke(); ctx.beginPath(); ctx.lineWidth = 2; // 粗细 ctx.strokeStyle = 'rgba( 255, 0, 0, 0.5 )'; // 颜色 ctx.moveTo( 400, 200 ); // 起始点 // void bezierCurveTo(in float cp1x, in float cp1y, in float cp2x, in float cp2y, in float x, in float y); // 三次贝塞尔曲线 // 第一控制点 第二控制点 结束点 ctx.bezierCurveTo( 600, 200, 600, 400, 400, 400 ); ctx.stroke(); </script> </body> </html> |
分类目录归档：canvas
HTML5之Canvas（二）——画曲线arc、arcTo
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas</title> </head> <body> <canvas id="canvas" width="800" height="800"></canvas> <script> var ctx = canvas.getContext( "2d" ); // 获取画笔 // 设置画笔属性 ctx.lineWidth = 2; ctx.strokeStyle = 'rgba( 255, 0, 0, 0.5 )'; // 线颜色 ctx.fillStyle = 'rgba( 255, 0, 0, 0.5 )'; // 填充颜色 // void arc(in float x, in float y, in float radius, in float startAngle, in float endAngle, in boolean anticlockwise); // 圆心X 圆心Y 半径 起始点 结束点 顺/逆时针 ctx.arc( 300, 300, 200, 0, Math.PI * 2 / 4, 1 ); ctx.fill(); // 填充 // void arcTo(in float x1, in float y1, in float x2, in float y2, in float radius); ctx.moveTo( 400, 100 ); ctx.arcTo( 700, 100, 600, 200, 50 ); ctx.stroke(); // 滑线 </script> </body> </html> |
参考：http://jo2.org/html5-canvas%E7%94%BB%E5%9B%BE6%EF%BC%9A%E7%94%BB%E6%9B%B2%E7%BA%BF%E4%B9%8Barcto/
HTML5之Canvas（一）——画起来
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas</title> </head> <body> <canvas id="canvas"></canvas> <script> var ctx = canvas.getContext( "2d" ); // 获取画笔 // 画图 ctx.moveTo( 10, 10 ); ctx.lineTo( 110, 10 ); ctx.lineTo( 110, 110 ); ctx.lineTo( 10, 110 ); ctx.lineTo( 10, 10 ); ctx.moveTo( 150, 10 ); ctx.lineTo( 150, 100 ); // 设置画笔属性 ctx.lineWidth = 10; // 粗细 ctx.lineJoin = 'round'; // lineJoin，意思即线的交汇处，有3个属性：miter(默认，尖角)，bevel（斜角）,round（圆角） ctx.lineCap = 'round'; //即lineCap属性，这个就是定义线条的端点。lineCap有3个值：butt（平，默认）,round（圆）,square（方） ctx.strokeStyle = 'rgba( 255, 0, 0, 0.5 )'; // 颜色 // ctx.closePath(); // 闭合路径 // 渲染 ctx.stroke(); </script> </body> </html> |
|
1 2 3 4 5 6 7 8 |
interface CanvasElement : Element { attribute unsigned long width; attribute unsigned long height; DOMString toDataURL(optional in DOMString type, in any... args); Object getContext(in DOMString contextId); }; |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
interface CanvasRenderingContext2D { // back-reference to the canvas readonly attribute HTMLCanvasElement canvas; // state void save(); // push state on state stack void restore(); // pop state stack and restore state // transformations (default transform is the identity matrix) void scale(in float x, in float y); void rotate(in float angle); void translate(in float x, in float y); void transform(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy); void setTransform(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy); // compositing attribute float globalAlpha; // (default 1.0) attribute DOMString globalCompositeOperation; // (default source-over) // colors and styles attribute any strokeStyle; // (default black) attribute any fillStyle; // (default black) CanvasGradient createLinearGradient(in float x0, in float y0, in float x1, in float y1); CanvasGradient createRadialGradient(in float x0, in float y0, in float r0, in float x1, in float y1, in float r1); CanvasPattern createPattern(in HTMLImageElement image, in DOMString repetition); CanvasPattern createPattern(in HTMLCanvasElement image, in DOMString repetition); CanvasPattern createPattern(in HTMLVideoElement image, in DOMString repetition); // line caps/joins attribute float lineWidth; // (default 1) attribute DOMString lineCap; // "butt", "round", "square" (default "butt") attribute DOMString lineJoin; // "round", "bevel", "miter" (default "miter") attribute float miterLimit; // (default 10) // shadows attribute float shadowOffsetX; // (default 0) attribute float shadowOffsetY; // (default 0) attribute float shadowBlur; // (default 0) attribute DOMString shadowColor; // (default transparent black) // rects void clearRect(in float x, in float y, in float w, in float h); void fillRect(in float x, in float y, in float w, in float h); void strokeRect(in float x, in float y, in float w, in float h); // path API void beginPath(); void closePath(); void moveTo(in float x, in float y); void lineTo(in float x, in float y); void quadraticCurveTo(in float cpx, in float cpy, in float x, in float y); void bezierCurveTo(in float cp1x, in float cp1y, in float cp2x, in float cp2y, in float x, in float y); void arcTo(in float x1, in float y1, in float x2, in float y2, in float radius); void rect(in float x, in float y, in float w, in float h); void arc(in float x, in float y, in float radius, in float startAngle, in float endAngle, in boolean anticlockwise); void fill(); void stroke(); void clip(); boolean isPointInPath(in float x, in float y); // text attribute DOMString font; // (default 10px sans-serif) attribute DOMString textAlign; // "start", "end", "left", "right", "center" (default: "start") attribute DOMString textBaseline; // "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" (default: "alphabetic") void fillText(in DOMString text, in float x, in float y, optional in float maxWidth); void strokeText(in DOMString text, in float x, in float y, optional in float maxWidth); TextMetrics measureText(in DOMString text); // drawing images void drawImage(in HTMLImageElement image, in float dx, in float dy, optional in float dw, in float dh); void drawImage(in HTMLImageElement image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh); void drawImage(in HTMLCanvasElement image, in float dx, in float dy, optional in float dw, in float dh); void drawImage(in HTMLCanvasElement image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh); void drawImage(in HTMLVideoElement image, in float dx, in float dy, optional in float dw, in float dh); void drawImage(in HTMLVideoElement image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh); // pixel manipulation ImageData createImageData(in float sw, in float sh); ImageData createImageData(in ImageData imagedata); ImageData getImageData(in float sx, in float sy, in float sw, in float sh); void putImageData(in ImageData imagedata, in float dx, in float dy, optional in float dirtyX, in float dirtyY, in float dirtyWidth, in float dirtyHeight); }; interface CanvasGradient { // opaque object void addColorStop(in float offset, in DOMString color); }; interface CanvasPattern { // opaque object }; interface TextMetrics { readonly attribute float width; }; interface ImageData { readonly attribute unsigned long width; readonly attribute unsigned long height; readonly attribute CanvasPixelArray data; }; interface CanvasPixelArray { readonly attribute unsigned long length; getter octet (in unsigned long index); setter void (in unsigned long index, in octet value); }; |
