Created
July 24, 2016 01:29
-
-
Save bwangelme/0b57719bcbee0cff52eb5848644447c4 to your computer and use it in GitHub Desktop.
canvas学习笔记,canvas是基于状态绘制的!
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
window.onload = function () { | |
var canvas = document.getElementById('canvas'); | |
canvas.width = 1024; | |
canvas.height = 768; | |
if(canvas.getContext("2d") ) { | |
var context = canvas.getContext('2d'); | |
// 使用context绘制 | |
// canvas的绘图是一种基于状态的绘图,应该先设置绘图的状态,再来进行绘制 | |
context.moveTo(100, 100); | |
context.lineTo(700, 100); | |
context.lineTo(700, 700); | |
context.lineTo(100, 700); | |
context.lineTo(100, 100); | |
context.lineWidth = 5; | |
context.strokeStyle = 'rgb(200, 0, 0)'; | |
context.stroke(); | |
context.moveTo(200, 200); | |
context.lineTo(600, 200); | |
context.strokeStyle = 'rgb(0, 0, 0)'; | |
// canvas是基于状态绘图的,下面这个stroke调用的时候,上面的moveTo,lineTo,线宽,颜色等依然起作用. | |
context.stroke(); | |
} else { | |
alert("当前浏览器不支持Canvas,请更换浏览器后再试。"); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment