JavaScript-Html-绘图-canvas基础

最新推荐文章于 2023-07-26 20:26:58 发布

lioil.win

最新推荐文章于 2023-07-26 20:26:58 发布

阅读量477

点赞数

分类专栏： JavaScript 文章标签： javascript html canvas 绘图基础控件

本文链接：https://blog.csdn.net/qq_32115439/article/details/72582063

版权

JavaScript 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

使用Html控件canvas，利用JavaScript自定义绘图

效果图如下：


<!DOCTYPE html>
<html>
    <body>
        <canvas id="canvas" width="300" height="350" style="border:4px solid #000;"/>
        <script>            
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");

            // 1.画线段
            context.beginPath();
            context.moveTo(10,10);
            context.lineTo(280,10);
            context.lineWidth = 8;
            context.strokeStyle = "#00f";
            context.stroke();
            context.closePath();

            // 2.画圆框
            context.beginPath();
            context.arc(60,80,50,0,360,false);
            context.lineWidth = 4;
            context.strokeStyle = "#f00";
            context.stroke();
            context.closePath();        
            // 画实心圆
            context.beginPath();
            context.arc(60,180,50,0,360,false);
            context.fillStyle = "#00f";
            context.fill();
            context.closePath();

            // 3.画矩形框
            context.beginPath();
            context.strokeRect(150,40,100,50);
            context.closePath();            
            // 画实心矩形
            context.beginPath();
            context.fillRect(150,90,100,50);
            context.closePath();

            // 4.添加图片
            context.beginPath();
            var image = new Image();
            image.src = "http://avatar.csdn.net/5/3/C/1_qq_32115439.jpg";
            context.drawImage(image,150,160,100,100);
            context.closePath();

            // 5.添加文字
            context.beginPath();
            context.font = "60px 宋体";           
            context.fillText("lioil.win",10,320,280);
            context.closePath();
        </script>
    </body>
</html>

简书: http://www.jianshu.com/p/9e495ea9aea6
CSDN博客: http://blog.csdn.net/qq_32115439/article/details/72582063
GitHub博客：http://lioil.win/2017/05/20/JS_Html_Canvas.html
Coding博客：http://c.lioil.win/2017/05/20/JS_Html_Canvas.html

lioil.win

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-Html-绘图-canvas基础

使用Html控件canvas，利用JavaScript自定义绘图效果图如下： <!DOCTYPE html><html> <body> <canvas id="canvas" width="300" height="500" style="border:4px solid #000;"/> <script> v
复制链接

扫一扫

专栏目录