canvas-基本应用－例子1

来源：互联网发布：2016珠三角经济数据编辑：程序博客网时间：2024/06/06 00:52

笔者通过https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage 学习canvas

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>skeleton</title>    <style type="text/css">        #mycanvas {            border: 10px dashed black;        }    </style></head><body onload="draw()"><h2>A skeleton template</h2><canvas id="mycanvas"></canvas><script type="text/javascript">    function draw() {        alert('draw');        var canvas = document.getElementById('mycanvs');        var ctx = canvas.getContext('2d');    }</script></body></html>

效果：

学习过程过程碰到的问题和需要注意的：

1.一开始，我将onload放到canvas标签里，发现总是没有执行到alert。后来放到body中，执行到了。

2.即使没有js这一段代码，边框也可以绘制出来。

3.canvas初始如果不指定宽度和高度，默认为300px和150px

阅读全文

0 0