-
font-style: normal(默认)/italic(斜体字)/oblique(倾斜字体) font-variant:normal(默认)/small-caps(只要在使用英文小写字母时才能看出区别，以一种小型的大写字母形式显示小写字母) font-weight:lighter/normal(默认)/bold/bolder,,也可以使用数字设置：100,200,300,400(默认),500,600,700(bold)，800,900 font-size:px(默认，如20px)/em(如2em)/百分比%(如150%)，也可以使用以下属性值进行设置：xx-small, x-small, medium, large, x-large, xx-large font-family:可以设置多种字体备选；支持@font-face；web安全字体查看全部
-
context.transform(a, b, c, d, e, f); /* a:水平缩放(默认值1) b:水平倾斜(默认值0) c:垂直倾斜(默认值0) d:垂直缩放(默认值1) e:水平位移(默认值0) f:垂直位移(默认值0) */ context.transform();可以叠加使用，如果需要重新初始化矩阵变换的值，可以用: context.setTransform(a, b, c, d, e, f);//它会使得之前设置的context.transform()失效查看全部
-
感谢同学的分享~ var context = canvas.getContext("2d"); context.width = 800; context.height = 800; context.lineWidth = 10; context.strokeStyle = "#efe0ce"; context.fillStyle = "rbg(255,0,0)"; context.fill(); drawStar(context,150,300,400,400,0,5,15); // 多边形复用Star // drawStar(cxt,r,R,x,y,rot,pol,angelStart) // drawStar(context（绘图环境）、内圆半径、外圆半径、Star的X轴偏移量、Star的y轴偏移量、Star旋转度数（顺时针）、几边形、Star旋转度数（逆时针）) function drawStar(cxt,r,R,x,y,rot,pol,angelStart){ cxt.beginPath(); for (var i=0;i<pol;i++){ cxt.lineTo(x+R*Math.cos((angelStart+(360/pol)*i-rot)/180*Math.PI) ,y-R*Math.sin((angelStart+(360/pol)*i-rot)/180*Math.PI)); cxt.lineTo(x+r*Math.cos((angelStart+360/(pol*2)+(360/pol)*i-rot)/180*Math.PI) ,y-r*Math.sin((angelStart+360/(pol*2)+(360/pol)*i-rot)/180*Math.PI)); } cxt.closePath(); cxt.stroke(); }查看全部
-
https://code.google.com/p/explorercanvas/downloads/detail?name=excanvas_r3.zip&can=2&q= 第一种 explorecanvas 只要多引入这个js包就可以支持了 <!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]--> 第二种 google chrome frame 开发者指南： http://www.chromium.org/developers/how-tos/chrome-frame-getting-started#TOC-Troubleshooting-installation-issues https://developers.google.com/chrome/chrome-frame/ 需要安装谷歌浏览器框架，会将IE引擎替换成chrome 引擎。会支持所有的HTML5特性。查看全部
-
scale会有副作用，会将图形的其他属性都进行缩放查看全部
-
代码还是自己敲一遍比较有感觉。查看全部
-
// 任意正多边形 function drawSimplePolygon(ctx, opts) { var R = +opts.R || 200, r = +opts.r || 100, c = +opts.count >= 3 ? +opts.count : 5, x = +opts.x || 0, y = +opts.y || 0, rotate = +opts.rotate || 0, borderWidth = +opts.borderWidth || 4, borderStyle = opts.borderStyle || '#000', styles = opts.styles || '#fff'; var radian = Math.PI / 180; var c_ang = 360 / c, out_ang = 90 - c_ang, in_ang = 90 - (90 - out_ang) / 2; ctx.beginPath(); ctx.strokeStyle = borderStyle; ctx.lineWidth = borderWidth; ctx.fillStyle = styles; for (var i = 0; i < c; i++) { var x1 = Math.cos((out_ang + i * c_ang - rotate) * radian) * R + x; var y1 = -Math.sin((out_ang + i * c_ang - rotate) * radian) * R + y; var x2 = Math.cos((in_ang + i * c_ang - rotate) * radian) * r + x; var y2 = -Math.sin((in_ang + i * c_ang - rotate) * radian) * r + y; ctx.lineTo(x1, y1); ctx.lineTo(x2, y2); } ctx.closePath(); ctx.fill(); ctx.stroke();}查看全部
-
顺时针路径为1,逆时针路径为-1,二者得0中间者,绘制也查看全部
-
fillStyle=color、gradient、image、canvas、video查看全部
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <canvas id="canvas" > 当前浏览器不支持Canvas，请更换浏览器后再试 </canvas> <script> window.onload = function(){ var canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 800; var context = canvas.getContext("2d"); context.beginPath(); context.moveTo(100,350); context.lineTo(500,350); context.lineTo(500,200); context.lineTo(700,400); context.lineTo(500,600); context.lineTo(500,450); context.lineTo(100,450); context.closePath(); context.lineWidth = 10; context.fillStyle = "yellow"; context.strokeStyle = "#058"; context.fill(); context.stroke(); } </script> </body> </html> 先填充，再绘制，查看全部
-
http://www.w3c.org/TR/2dcontext/ https://html.spec.whatwg.org/查看全部
-
文字渲染基础 context.font = "bold 40px Arial"; context.fillText(string,x,y,[maxlen]); context.strokeTex(string,x,y,[maxlen]); context.font = "20px sans-serif"(默认值) font-style:normal(默认)/italic(斜体字)/oblique(倾斜字体) font-variant：small-caps(小写型大写字母); font-weight：lighter/normal/bold/bolder font-size font-family 文本对齐 context.textAlign = left/center/right(水平) context.textBaseline = top/middle/bottom/alphabetic/ideographic/hanging(垂直) 文本度量 context.measureText(string).width;查看全部
-
lineJoin: 线条与线条相交的形式 miter(default) 尖角； bevel 方角、斜切； round 圆角； miterLimit:内角与外角的距离。默认值是10，此属性只有在lineJoin = "miter"下才有效，且miterLimit >10，线条连接处自动斜切（lineJoin ="bevel")查看全部
-
通过修改参数可以创建各种多边形 <script> window.onload = function(){ var canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 800; var context = canvas.getContext("2d"); drawPol(context,6,300,300,400,400,0,60,60,60,10); } function drawPol(cxt,pol,R,r,x,y,rot,angle,angle2,angleDiff){ cxt.beginPath(); for (var i=0; i<pol; i++){ cxt.lineTo(Math.cos((angle+i*angleDiff-rot)/180*Math.PI)*R+x, -Math.sin((angle+i*angleDiff-rot)/180*Math.PI)*R+y); cxt.lineTo(Math.cos((angle2+i*angleDiff-rot)/180*Math.PI)*r+x, -Math.sin((angle2+i*angleDiff-rot)/180*Math.PI)*r+y); } cxt.closePath(); cxt.stroke(); } </script>查看全部
-
window.onload=function(){ var canvas=document.getElementById("canvas"); canvas.width=800; canvas.height=800; var context=canvas.getContext("2d"); context.font="bold 50px Arial"; context.lineWidth=1; context.strokeStyle="#058"; context.strokeText("欢迎大家来学习",20,400,100); context.fillStyle=""; context.fillText(); } 文字渲染查看全部
举报
0/150
提交
取消