新葡萄京娱乐场手机版 2

新葡萄京娱乐场手机版丰田凯美瑞旅行版曝光,Canvas组件绘制太极图案

日前,海外媒体绘制出了丰田凯美瑞旅行车的效果图,绘制者表示称,现款第七代凯美瑞的前卫造型非常适合设计成旅行版车型,但是,不过官方则表示没有量产该车的计划。

一实现思路:

canvas绘制文字,canvas绘制

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>canvas绘制文字</title>
        <script src="js/canvas.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            body{
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body onload="draw('canvas')">
        <canvas id="canvas" width="800" height="300"></canvas>
    </body>
</html>        

 

function draw(id){
    var canvas = document.getElementById(id);//获得canvas对象
    var context = canvas.getContext('2d');//获得上下文,并设置成2d
    context.fillStyle = "green";//设置画布大小的矩形颜色
    context.fillRect(0,0,800,300);//绘制画布大小的矩形
    context.fillStyle = "white";//设置文字的填充色
    context.strokeStyle = "white";//设置文字边框的颜色
    context.font = "bold 40px '华文行楷','微软雅黑'";//设置字体粗细,大小,样式【可多选】。
    //文字垂直对齐方式,默认值是alphabetic
    //        Bottom                Alphabetic
    //—————————————————Middle——————————————————————————————
    //Top                                        Hanging
    //context.textBaseline = 'alphabetic';
    //属性值可以是top(顶部对齐)、hanging(悬挂)、middle(中间对齐)、bottom(底部对齐)、alphabetic是默认值。
    context.textBaseline = 'hanging';
    //设置文字水平对齐方式,默认值是start
    //            |
    //            |
    //            |start
    //         end|
    //            |left
    //          center
    //       right|
    //            |
    //            |
    //context.textAlign = 'start';
    //属性值可以设置为:start、end、left、right、center
    context.fillText("欢迎光临华帅博客",30,70);
    context.strokeText("HTML5+CSS3实战",200,130);
    context.fillText("新手入门,大神见谅。",380,190);
    context.fillText('123456789987654321123456789987654321123456789987654321123456789987654321123456789987654321',0,260,800)
}

 

绘制字体时可以使用的fillText方法或者StrokeText方法。
fillText方法用填充的方式来绘制字符串
context.fillText(text,x,y,[maxwidth]);

strokeText方法用轮廓的方式来绘制字符串
context.strokeText(text,x,y,[width]);

第一个参数text表示要绘制的文字,第二个参数x表示要绘制的起点横坐标,第三个参数y表示要绘制的文字的起点纵坐标,第四个参数maxwidth为可选参数,表示显示文字时最大的宽度,可以防止文字溢出。

! DOCTYPE html html
head meta charset =”utf-8″ title canvas绘制文字 / title script
src=”js/canvas.js” type=”text/javascript” charset=”utf-8″/s…

新葡萄京娱乐场手机版 1

实现原理主要是利用HTML5的Canvas组件提供的path函数功能来绘制圆,首先绘

制两个半圆,分别为黑色和白色,组成一个圆,绘制完成以后再分别绘制一个黑色

和白色的圆在绘制好的黑白圆之内,半径恰好是黑白大圆一半。
最后在绘制好的两

个黑白小圆内分别填充白色和黑色的点,半径大小为10pixel左右。

二程序效果如下:

新葡萄京娱乐场手机版 2

三关键程序解析:

发表评论

电子邮件地址不会被公开。 必填项已用*标注