区域剪辑
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvastitle><style>.canvas{border:1px solid #abcdef;background-color: #a9add2;}style>head><body><canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvascanvas><script>var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");//上下文，绘图环境//在矩形右上角绘制一个圆 ctx.arc(300,100,200,0,2*Math.PI,true);//进行区域剪辑//后面绘制的所有图形都会在这个原型区域内绘制，超出部分被剪辑 ctx.clip();
ctx.fillStyle="pink";//绘制矩形 ctx.fillRect(100,100,200,200);
script>body>html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvastitle><style>.canvas{border:1px solid #abcdef;background-color: #a9add2;}style>head><body><canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvascanvas><script>var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");//上下文，绘图环境//在矩形右上角绘制一个圆 ctx.arc(300,100,200,0,2*Math.PI,true);//进行区域剪辑//后面绘制的所有图形都会在这个原型区域内绘制，超出部分被剪辑 ctx.clip();
ctx.fillStyle="pink";//绘制矩形 ctx.fillRect(100,100,200,200);//再绘制一个圆 ctx.fillStyle="#abcdef";
ctx.beginPath();
ctx.arc(400,300,100,0,2*Math.PI,true);
ctx.fill();
script>body>html>
取消区域剪辑，使用save和restore
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvastitle><style>.canvas{border:1px solid #abcdef;background-color: #a9add2;}style>head><body><canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvascanvas><script>var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");//上下文，绘图环境ctx.save();//在矩形右上角绘制一个圆 ctx.arc(300,100,200,0,2*Math.PI,true);//进行区域剪辑//后面绘制的所有图形都会在这个原型区域内绘制，超出部分被剪辑 ctx.clip();
ctx.fillStyle="pink";//绘制矩形 ctx.fillRect(100,100,200,200);
ctx.restore(); //再绘制一个圆 ctx.fillStyle="#abcdef";
ctx.beginPath();
ctx.arc(400,300,100,0,2*Math.PI,true);
ctx.fill();
script>body>html>
绘制四色圆
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvastitle><style>.canvas{border:1px solid #abcdef;background-color: #a9add2;}style>head><body><canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvascanvas><script>var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");//上下文，绘图环境//绘制一个圆 ctx.arc(300,200,100,0,2*Math.PI,true);//进行区域剪辑//后面绘制的所有图形都会在这个原型区域内绘制，超出部分被剪辑 ctx.clip();
ctx.fillStyle="pink";//绘制矩形 ctx.fillRect(200,100,300,200);
ctx.fillStyle="lightgreen";//绘制矩形 ctx.fillRect(300,100,400,200);
ctx.fillStyle="#abcdef";//绘制矩形 ctx.fillRect(200,200,300,300);
ctx.fillStyle="orange";//绘制矩形 ctx.fillRect(300,200,400,300);
script>body>html>
阴影
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvastitle><style>.canvas{border:1px solid #abcdef;background-color: #a9add2;}style>head><body><canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvascanvas><script>var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");//上下文，绘图环境ctx.fillStyle="pink";//阴影x轴偏移 ctx.shadowOffsetX=10;//阴影y轴偏移 ctx.shadowOffsetY=10;//阴影颜色 ctx.shadowColor="rgba(0,0,0,.2)";//模糊程度 ctx.shadowBlur=1;//绘制矩形 ctx.fillRect(100,100,100,100); script>body>html>
文字阴影
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvastitle><style>.canvas{border:1px solid #abcdef;background-color: #a9add2;}style>head><body><canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvascanvas><script>var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");//上下文，绘图环境ctx.fillStyle="pink";//阴影x轴偏移 ctx.shadowOffsetX=10;//阴影y轴偏移 ctx.shadowOffsetY=10;//阴影颜色 ctx.shadowColor="rgba(0,0,0,.2)";//模糊程度 ctx.shadowBlur=1;//绘制矩形 ctx.fillRect(100,100,100,100);//绘制文字 ctx.font="20px sans-serif";
ctx.fillText("cyy呀",300,300); script>body>html>
补充一下，设置文字的大小，这个ctx.font中，必须要加字体
我刚开始只是单纯设置了20px，发现是不生效的
必须加上字体如sans-serif才可以
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvastitle><style>.canvas{border:1px solid #abcdef;background-color: #a9add2;}style>head><body><canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvascanvas><script>var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");//上下文，绘图环境ctx.fillStyle="pink";//阴影x轴偏移 ctx.shadowOffsetX=10;//阴影y轴偏移 ctx.shadowOffsetY=10;//阴影颜色 ctx.shadowColor="rgba(0,0,0,.2)";//模糊程度 ctx.shadowBlur=1;//绘制矩形 ctx.fillRect(100,100,100,100);//绘制文字 ctx.font="20px sans-serif";
ctx.fillText("cyy呀",300,300);
ctx.fillText("小仙女",100,300); script>body>html>
绘制曲线
圆弧的绘制 arc
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvastitle><style>.canvas{border:1px solid #abcdef;background-color: #a9add2;}style>head><body><canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvascanvas><script>var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");//上下文，绘图环境ctx.arc(200,200,50,0,Math.PI/2,true);//逆时针 ctx.stroke();
ctx.beginPath();
ctx.arc(400,200,50,0,Math.PI/2,false);//顺时针 ctx.stroke(); script>body>html>
二次贝塞尔曲线生成工具：
http://blogs.sitepointstatic.com/examples/tech/canvas-curves/quadratic-curve.html
三次贝塞尔曲线生成工具
http://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html
二次贝塞尔曲线由三个点完成
最左边的点对应的是moveTo的坐标
中间的点对应的是quadraticCurveTo的第一个坐标点参数
最右边的点对应的是quadraticCurveTo的第二个坐标点参数
三次贝塞尔曲线由4个点完成
最左边的点对应的是moveTo的坐标
第一个柄对应的是quadraticCurveTo的第一个坐标点参数
第二个柄对应的是quadraticCurveTo的第二个坐标点参数
最右边的点对应的是quadraticCurveTo的第三个坐标点参数
Copyright © 2004-2024 Ynicp.com 版权所有 法律顾问:建纬(昆明)律师事务所 昆明市网翼通科技有限公司 滇ICP备08002592号-4
