关闭

Canvas绘制图形图像

标签: Canvas
283人阅读 评论(0) 收藏 举报
分类:
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        //矩形
        function drawRect(id)
        {
            var canvas = document.getElementById(id);
            var content = canvas.getContext("2d");
            content.fillStyle = "#FF0000";//定义填充色
            content.fillRect(0,0,200,200);//定义起点0,0 宽200 高200
        }
        //线条
        function drawLine(id)
        {
            var canvas = document.getElementById(id);
            var context = canvas.getContext("2d");
            context.moveTo(50,50);//定义线条起点
            context.lineTo(100,50);//从起点开始移动
            context.lineTo(50,50);//从上面的终点开始移动
            context.stroke();
        }

        //三角形
        function drawLineThree(id)
        {
            //获取Canvas对象(画布)
            var canvas = document.getElementById(id);
            //简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误
            if(canvas.getContext){
                //获取对应的CanvasRenderingContext2D对象(画笔)
                var ctx = canvas.getContext("2d");

                //开始一个新的绘制路径
                ctx.beginPath();
                //设置线条颜色为蓝色
                ctx.strokeStyle = "blue";
                //设置填充色
                ctx.fillStyle = "red";
                //设置路径起点坐标
                ctx.moveTo(20, 50);
                //绘制直线线段到坐标点(60, 50)
                ctx.lineTo(20, 100);
                //绘制直线线段到坐标点(60, 90)
                ctx.lineTo(70, 100);
                //先关闭绘制路径。注意,此时将会使用直线连接当前端点和起始端点。
                ctx.closePath();
                //填充颜色
                ctx.fill();
                //最后,按照绘制路径画出直线
                ctx.stroke();
            }

        }

        //圆
        function drawArc(id)
        {
            var canvas = document.getElementById(id);
            var context = canvas.getContext("2d");
            //定义径向渐变色
            var rg =context.createRadialGradient(50, 50, 0, 50, 50, 20);
            rg.addColorStop(0,'red');
            rg.addColorStop(0.5,'yellow');
            rg.addColorStop(1,'blue');
            context.fillStyle = rg;//定义填充色
            context.beginPath();
            /*cx  水平坐标
            cy  垂直坐标
            radius  半径
            start-angel  圆周起始位置
            end_angle  弧长 Math.PI是半圆  Math.PI*2是整个圆  0.5为四分之一
            direction 顺、逆时针  false为逆时针,true为顺时针(决定了圆弧的方向)*/
            context.arc(50,50,20,0,Math.PI*2,true);
            context.closePath();
            context.fill();
        }

        //横向渐变
        function drawLinearGradient(id)
        {
            var c=document.getElementById(id);
            var cxt=c.getContext("2d");
            var grd=cxt.createLinearGradient(0,0,175,50);
            grd.addColorStop(0,"#FF0000");
            grd.addColorStop(1,"#00FF00");
            cxt.fillStyle=grd;
            cxt.fillRect(0,0,175,50);
        }

        //图像
        function drawImg(id)
        {
            var canvas = document.getElementById(id);
            var context = canvas.getContext("2d");
            var img = new Image();
            img.src = "1.png";
            //html5在使用drawImage绘图的时候,出现不显示的问题,原来要想是图片正常显示需要为图片添加一个onload事件
            img.onload = function(){
                context.drawImage(img,100,100);
            }
            context.drawImage(img,100,100);
        }

    </script>
</head>
<body onload="drawRect('canvasid')">
    <canvas id="canvasid" width="500" height="500"></canvas>
</body>
</html>


0
0
查看评论

canvas调用webgl绘制图形图像

WebGL study         /**  * Created by houbingshuai on 2016/12/3.  */ window.onload = function () {...
  • gao123ming
  • gao123ming
  • 2017-12-07 17:32
  • 16

[Canvas绘图] 第27节 三维初探

本节目标: (1)  绘制椭圆 (2)  绘制简单三维图形 实现步骤: 采用贝氏曲线绘制椭圆 //绘制椭圆 function BezierEllipse1(x, y, a, b, rotate) { //关键是bezierCurveTo中两个控制点的设...
  • mwsister
  • mwsister
  • 2015-12-17 14:55
  • 1275

使用Canvas绘制各种图形

1、首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, you need 4 basic components: A Bitmap to ho...
  • lebsharing
  • lebsharing
  • 2016-11-23 14:52
  • 323

html5 canvas学习--绘制文字

1.绘制填充文字:context.fillText(text,x,y,[maxWidth]) function draw(){ var ctx = document.getElementById("myCanvas").getContext(&quo...
  • W3Chhhhhh
  • W3Chhhhhh
  • 2016-10-07 21:10
  • 2532

Canvas绘制曲线

转自:http://blessdyb.iteye.com/blog/1399090 2.游戏中的数学知识   在游戏的开发中,数学知识特别是其中的三角函数使用特别广泛 2.1 角度      ...
  • cuishiying
  • cuishiying
  • 2015-07-24 17:42
  • 754

Canvas:绘制文本

渲染文本 文本样式 文本测量
  • lh_qppr
  • lh_qppr
  • 2016-10-19 10:00
  • 197

js使用canvas绘制高清图片

H5能使用canvas绘制图像,但是有些时候我们需要绘制高清的图片。先介绍下几个定义:什么是devicePixelRatio: window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。 公式表示...
  • hejunpochen
  • hejunpochen
  • 2016-08-02 13:18
  • 2032

[前端] canvas绘制视频

一、概要 <!-- 视频地址:http://www.w3school.com.cn/example/html5/mov_bbb.* 用到的video事件: play pause 和 ended --> 二、HTML video id="video" co...
  • u010081689
  • u010081689
  • 2015-05-04 10:35
  • 2036

canvas-绘制图像

canvas-绘制图像 #canvas{ border: 1px solid palevioletred; } //获取到canvas元素 var canva...
  • hgyu_962464
  • hgyu_962464
  • 2017-02-06 15:05
  • 236

HTML5 移动开发 -- Canvas 9.4 表格 , 折线图

表格                         (function (){ &#...
  • menxu_work
  • menxu_work
  • 2013-06-18 11:18
  • 5968
    个人资料
    • 访问:53830次
    • 积分:1090
    • 等级:
    • 排名:千里之外
    • 原创:45篇
    • 转载:77篇
    • 译文:0篇
    • 评论:1条
    文章分类